如何使用腳本打開文件對話框或瀏覽文件窗口？

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屬性。