在html中替換文件瀏覽按鈕的最佳方式是什麼？

Question

我知道當您使用input標記type="file時，可以替換HTML中生成的瀏覽按鈕。

我不確定什麼是最好的方法，所以如果有人有這方面的經驗，請捐助。

Answer 1

，最好的辦法是使文件輸入控制幾乎無形的（通過給它一個非常低透明度 - 不做「visibility：hidden的」或「顯示：無」）和絕對位置的東西在它下面 - 與較低的Z指數。

這樣，實際控制將不可見，並且無論您放在它下面什麼都會顯示。但是，由於控件位於該按鈕上方，它仍然會捕獲點擊事件（這就是爲什麼您要使用不透明度，而不是可見性或顯示 - 如果您使用這些元素隱藏它，瀏覽器將使元素不可點擊）。

This article深入瞭解該技術。

Answer 2

這在技術上不可能出於安全目的，所以用戶不能被誤導。

但是，有幾個解決方法 - 例如，看一看http://www.quirksmode.org/dom/inputfile.html。

有關記錄，這個問題已被要求here（我給出了相同的答案）。

Answer 3

瀏覽器並不真的喜歡你搞亂文件輸入，但它可以做到這一點。我已經看到了一些技巧，但最簡單的方法是將文件輸入完全定位在任何想用作按鈕的位置，並將其不透明度設置爲零或接近零。這意味着，當用戶點擊圖像（或任何你在那裏），他們實際上點擊不可見的瀏覽按鈕。

例如：

<input type="file" id="fileInput"> 
<img src="..."> 

#fileInput{ 
    position: absolute; 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: alpha(opacity=0); 
} 

Answer 4

如果你不介意使用JavaScript您可以將文件輸入的opasity設置爲0，並將您的頂部風格的控制通過的z-index和發送從按鈕到文件輸入的複雜事件。看到這裏的技術：http://www.quirksmode.org/dom/inputfile.html

Answer 5

你也可以使用Flash上​​傳器如SWFupload來做到這一點。