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

我喜歡顯示圖像或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沒有按不支持它。是否有任何其他方式通過點擊圖像打開文件瀏覽器對話框？

來源

2013-01-17 Mahmood Kohansal

不幸的瀏覽器不允許打開瀏覽文件對話框而不被點擊的輸入標籤與類型=「文件」有一些方法aorund這個工作觸發特殊事件，但它贏得當然，你的每一個瀏覽器都能正常工作。

來源

2013-01-17 08:54:37

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

來源

2013-01-17 09:57:04 user1506098

<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-17 10:26:56

這可能是一對夫婦的晚年，但這裏是做什麼的，沒有任何JavaScript的一個方式，它也是用任何瀏覽器兼容。

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

如果你發現問題，則可能需要使用for屬性在label指向輸入的id。

來源

2015-01-21 19:45:12

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

回答

相關問題