Question

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

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

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

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

How to open a file / browse dialog using javascript?

但解决方案适用于特殊浏览器，而firefox不支持它。有没有其他方法可以通过单击图像打开文件浏览器对话框？！

Answer 1

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

Answer 2

不幸的是，浏览器不允许打开浏览文件对话框而没有通过单击带有 type =“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>

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

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

4 个答案: