JavaScript 中的打开文件对话框

Question

我需要一种解决方案，以便在单击 div 时以 HTML 格式显示打开的文件对话框。单击div 时必须打开打开文件对话框。

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

Answer 1

AFAIK 你仍然需要一个<input type="file"> 元素，然后你可以使用quirksmode 中的一些东西来设置它的样式

Answer 2

这个不错

Fine Uploader demo

它本身就是一个<input type='file' /> 控件。但是在其上放置了一个 div，并应用了 css 样式来获得这种感觉。文件控件的不透明度设置为 0，以便在单击 div 时看起来对话窗口已打开。

Answer 3

唯一没有<input type="file"> 的是在div 上嵌入一个透明的flash 电影。然后，您可以使用用户生成的点击事件（符合 Flash 10 新安全规则）来触发对 flash 的FileReference.browse 的调用。

它提供了对quirksmode way 的额外依赖，但作为回报，您会获得更多事件（例如内置的进程事件）。

Answer 4

    $("#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 5

首先添加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>

如果你已经有 script 标签，只需在上面添加这些函数即可。

在您的 body 或 form 标签中添加：

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

无论在您的 html 中的哪个位置，只是 像那样 您已经创建了一个类型为 OpenFileDialog 类的新实例作为 global 变量，其名称为 元素的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= “文件”，然后你可以使用上面的创建函数在脚本中完成：

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 文件添加到您的项目或网站中，并且在此文件中您可以将所有打开的文件对话框功能从 script 标签和 html 或 web 表单页面，并在此 JScript 文件中的 html 或 web 表单页面中使用它们，但不要忘记之前将 html 或 web 表单页面链接到 JScript 文件.您只需将 JScript 文件拖到 head 标记中的 html 页面即可。如果您的页面是 web 表单而不是简单的 html，并且您没有 head 标签，则将其放在任何地方以便它可以工作。 不要忘记在该 JScript 文件中定义全局变量，其值将是您的正文或表单 id 作为字符串。将 JScript 文件链接到 html 或 web 表单页面后，您可以 onload 表单正文的事件，将该变量的值设置为您的正文或表单 ID。然后在 JScript 文件中，您不必再为文档提供一页的正文或表单的 id，只需为其提供该变量的值即可。您可以将该变量命名为 bodyId 或 formId 或 bodyOrFormId 或您想要的任何其他名称。

祝你好运！

Answer 6

实际上，您不需要所有具有不透明度、可见性、<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 7

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

---

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

编辑 2：另一种方法是使用 opacity: 0。问题是它会弄乱布局。我在示例中添加了一些 CSS 来说明问题。

---

label {
    display: inline-block;
    background: #ddd;
    border: 1px outset #ccc;
    border-radius: .3em;
    padding: .3em 1em;
    margin: .5em;
}

label:active {
  border-style: inset;
}

<label>
  Using <code>position: fixed</code>
  <input type="file" style="position: fixed; top: -100%">
</label>

<label>
  Using <code>opacity: 0</code>
  <input type="file" style="opacity: 0">
</label>

如果您愿意，您可以通过在label 中使用for 指向输入的id 来采用“正确方式”，如下所示：

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

Answer 8

如果客户端机器上的 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 默认触发点击事件。所以它默认触发点击事件，不需要jQuery/javascript。如果它只是由 HTML 完成，为什么要使用 jQuery/jScript？而且您无法判断客户端是否禁用了 JS。即使 JS 关闭，您的功能也应该可以工作。

Working jsFiddle（你不需要JS，jquery）

Answer 9

这是最适合我的方法（在 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 10

最简单的方法：

#file-input {
  display: none;
}

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

重要的是，使用display: none 可确保隐藏文件输入不会占用任何位置（使用opacity: 0 会发生什么情况）。

Answer 11

可以使用

$('<input type="file" />').click()

Answer 12

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

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

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

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