1

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

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

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

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

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

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

4

4 回答 4

1 
$('img').click(function() {
    $('input[type="file"]').click();
});
于 2013-01-17T09:57:04.743 回答
0

不幸的是，浏览器不允许打开浏览文件对话框，除非点击带有type="file"的输入标签触发特定事件。有一些方法可以解决这个问题，但它不一定适用于你的每个浏览器有。

于 2013-01-17T08:54:37.783 回答
0

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

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

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

于 2015-01-21T19:45:12.597 回答
0 
<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>
于 2013-01-17T10:26:56.057 回答