如何使用脚本打开文件对话框或浏览文件窗口？答案

【问题标题】：How to open a File Dialog or Browse Files Window using Scripts?如何使用脚本打开文件对话框或浏览文件窗口？
【发布时间】：2012-12-31 18:16:35
【问题描述】：

我喜欢显示图像或任何 html 元素并为其初始化高度。当我在像这样的图像后面的 html 中使用文件类型的输入时：

<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">

所以输入元素消失了，当我点击图像文件打开对话框打开但它工作在正常输入元素的高度。当我将输入元素的高度设置为 100 像素时，它的工作量不会超过。

当我看到 html 的问题时，我决定使用 Javascript 或 Jquery 来解决问题，我搜索了一些类似的问题，例如：

How to open a file / browse dialog using javascript?

但解决方案是针对特殊浏览器的，firefox 不支持。有没有其他方法可以通过点击图片打开文件浏览器对话框？！

【问题讨论】：

标签： javascript html file input file-browser

【解决方案1】：

$('img').click(function() {
    $('input[type="file"]').click();
});

【讨论】：

【解决方案2】：

不幸的是，浏览器不允许打开浏览文件对话框，除非通过单击带有 type="file" 的 input 标签触发特定事件。有一些解决此问题的方法，但它不一定适用于您拥有的所有浏览器。

【讨论】：

【解决方案3】：

<style type="text/css">
#file-image {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
}


#file-image input {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
}

</style>
<div id="file-image">
    <input type="file">
    <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>

【讨论】：

【解决方案4】：

这可能晚了几年，但这是一种无需任何 Javascript 即可实现的方法，并且它也与任何浏览器兼容。

<label>
  Open file dialog
  <input type="file" style="display: none">
</label>

如果您发现问题，您可能需要使用label 中的for 属性指向输入的id。

【讨论】：