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

Question

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

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

因此，输入元素消失了，当我单击图像时，“文件打开对话框”打开了，但它在正常输入元素的高度下起作用。 当我将100px的高度设置为输入元素时，它的工作量不会超过。

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

如何使用javascript打开文件/浏览对话框？

但是解决方案是针对特殊浏览器的，而Firefox不支持。 还有什么其他方法可以通过单击图像来打开“文件浏览器”对话框？

Answer 1

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

Answer 2

不幸的是，浏览器不允许在没有点击类型为“ file”的输入标签的情况下触发特定事件的情况下打开浏览文件对话框。有一些方法可以解决此问题，但是它肯定不能在您使用的所有浏览器上都可以工作已经。

Answer 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>

Answer 4

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

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

如果发现问题，则可能需要在label指向输入id的for属性。