在JavaScript中打开文件对话框

Question

我需要一个解决方案来在HTML中显示打开文件对话框,同时单击a div.div单击时,必须打开打开文件对话框.

我不想将输入文件框显示为HTML页面的一部分.它必须显示在单独的对话框中,该对话框不是网页的一部分.

Answer 1

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

对于IE添加这个:

$("#logo").css('filter','alpha(opacity = 0');

Answer 2

我不知道为什么没有人指出这一点,但这是一种没有任何Javascript的方式,它也兼容任何浏览器.

编辑:在Safari中,input隐藏时禁用display: none.更好的方法是使用position: fixed; top: -100em.

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

如果你愿意,你可以走了"正确的方式"使用for的label指向id这样输入:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Answer 3

这是一个很好的

Fine Uploader演示

它<input type='file' />本身就是一种控制.但是将div放在那个上面并且应用css样式来获得这种感觉.文件控件的不透明度设置为0,以便在单击div时显示对话框窗口打开.

Answer 4

实际上,你不需要所有那些具有不透明度,可见度,<input>样式等的东西.看看:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

演示jsFiddle.在Chrome 30.0和Firefox 24.0中测试过.但是,在Opera 12.16中没有用.

Answer 5

最简单的方法：

#file-input {
  display: none;
}

<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

重要的是，使用 ofdisplay: none确保隐藏文件输入不会占用任何地方（使用 会发生什么opacity: 0）。

Answer 6

这对我来说效果最好(在IE8,FF,Chrome,Safari上测试过).

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

说明: 我将文件输入直接定位在要单击的元素上方,因此任何单击都会落在其上或其标签上(这会拉动上载对话框,就像您单击标签本身一样).我有一些问题,默认输入的按钮部分伸出标签的一侧,因此overflow: hidden在输入和display: inline-block标签上都是必要的.

Answer 7

如果javascript在客户端计算机上关闭怎么办？对所有方案使用以下解决方案.你甚至不需要javascript/jQuery.:

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

说明:for="Your input Id".默认情况下,通过HTML触发单击事件.所以它默认触发click事件,不需要jQuery/javascript.如果它只是通过HTML完成为什么使用jQuery/jScript？你不能告诉客户是否禁用了JS.即使JS已关闭,您的功能也应该可以正常工作.

工作jsFiddle(你不需要JS,jquery)

Answer 8

这是我在找不到好的解决方案后开发的解决方案

let input = document.createElement("input");
input.type = "file";
input.setAttribute("multiple", true);
input.setAttribute("accept", "image/*");
input.onchange = function (event) {
    //
    console.log(this.files);
};
input.click();

Answer 9

首先添加head标签:

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

如果您已经有脚本标签,只需在上面添加这些功能即可.

在您的正文或表单标记中添加:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

无论身在何处在你的HTML,只是喜欢你已经创建类型OpenFileDialog类作为一个新的实例全局变量,其名称为ID的元素,无论在你的代码或XAML,但在你的脚本或代码,你不能输入他的名字,然后读取一个属性或调用一个函数,因为有一些全局函数可以做那些未在元素输入type ="file"中定义的函数.您只需要为这些函数提供隐藏输入类型="文件"的id,这是OpenFileDialog实例的名称作为字符串.

为了简化您在html中创建打开文件对话框实例的生活,您可以创建一个执行此操作的函数:

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

如果要删除打开的文件对话框,则可以创建并使用以下函数:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

但在删除打开文件对话框之前,请通过制作和使用以下函数确保它存在:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

如果你不想在html 中的body或form标签中创建和添加打开的文件对话框,因为这是添加隐藏的输入type ="file",那么你可以使用上面的create function在脚本中完成:

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

确保靠近您的身体或表格标签,您添加了:

onload="yourBodyOrFormId_onload()"

如果您已经这样做,则不必在上面执行此操作.

提示:您可以添加到您的项目或网站新的JScript文件,如果你没有还,而在这个文件中,你可以把所有的打开文件对话框的功能远离脚本标签和HTML或Web表单页面,使用它们位于此JScript文件的html或Web表单页面中,但在将html或Web表单页面链接到JScript文件之前不要忘记.您只需将JScript文件拖到head标签中的html页面即可.如果您的页面是Web表单而不是简单的html,并且您没有头标记,那么将它放在任何位置以便它可以工作.不要忘记在该JScript文件中定义全局变量,其值将是您的正文或表单ID为字符串.将JScript文件链接到html或Web表单页面后,可以加载表单主体的事件,将该变量的值设置为正文或表单ID.然后在JScript文件中,您不必再向文档提供一个页面的正文或形式的id,只需给它该变量的值.您可以调用该变量bodyId或formId或bodyOrFormId或您想要的任何其他名称.

祝你好运!

Answer 10

1. 将输入元素type="file"放在页面上的任何位置并使用style="display:none". 给输入元素一个id。例如id="myid"。

<input type="file" style="display:none" id="myid"/>

2. 选择任何要用于打开文件对话框的 div、图像、按钮或任何元素，为其设置 onclick 属性，如下所示：

<a href="#" onclick="document.getElementById('myid').click()"/>