Input file上傳文件樣式支持html5的瀏覽器兼容解決辦法

Input file上傳文件樣式支持html5的瀏覽器兼容解決辦法：

最近在使用畫布處理圖像像素時用到了file上傳控件，發現了file上傳控件的兩個兼容性問題。一個是file上傳控件在火狐下沒法經過css改變width，另外一個是file上傳控件在不一樣的瀏覽器下的外觀和行爲都不同。
下面是file上傳控件在IE10，firefox16，chrome22,opera12,safari5.1.7裏的截圖：

 
在IE10裏，雙擊輸入框或者單擊按鈕都彈出文件選擇框。在其餘瀏覽器裏單擊輸入框，按鈕或文字均可以觸發文件選擇框。
鑑於這種混亂狀況，有必要要統同樣式和行爲。下面是個人兼容性方案。
先看一下最終結果在各瀏覽器的截圖：

基本思路：建立輸入框和按鈕模擬file上傳控件。將file上傳控件設置成透明。讓file上傳控件與用於模擬的按鈕右對齊。修改元素的堆疊順序，讓按鈕處於下面，file上傳控件在中間，輸入框在上面。在文件選擇完畢後將file上傳控件裏的值賦給用於模擬的輸入框。
原理：在不一樣的瀏覽器裏，file上傳控件的按鈕的height都是可調的，並且file上傳控件的右側都是能夠單擊的。因此經過調節file上傳控件的height，並調整file上傳控件的位置（右對齊），可讓file上傳控件的可單擊區域與用於模擬的按鈕徹底覆蓋。當file上傳控件透明時用戶單擊用於模擬的按鈕就觸發了文件選擇框。但同時file上傳控件的堆疊順序不能先於用於模擬的輸入框，否則當用戶將鼠標置於所見的輸入框上時可能會看到光標不是指示文本而是爲一個箭頭（並且爲一個箭頭時單擊會彈出文件選擇框），用戶將感到困惑。
實現：先看看html部分的代碼。

 

複製代碼代碼以下:

1 <div id="file">
2 <input type="text" value="未選擇文件" /><input type="button" value="瀏覽" /><input type="file" />
3 </div>

 

而後是css部分的代碼。

複製代碼代碼以下:

 1 #file {  2 position:relative;  3 width:226px;  4 height:25px;  5 border:1px #99f solid;  6 }  7 #file input {  8 font-size:16px;  9 margin:0; 10 padding:0; 11 position:relative; 12 vertical-align:middle; 13 outline:none; 14 } 15 #file input[type="text"] { 16 border:3px none; 17 width:172px; 18 z-index:4; 19 } 20 #file input[type="button"] { 21 width:54px; 22 height:25px; 23 z-index:2; 24 } 25 #file input[type="file"] { 26 position:absolute; 27 right:0px; 28 height:25px; 29 opacity:0; 30 z-index:3; 31 }

 

最後javascript部分，用於把file上傳控件得到的文件路徑顯示到可見的輸入框裏。

複製代碼代碼以下:

window.onload=function(){
var file=document.querySelector("#file input[type='file']");
var text=document.querySelector("#file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}
}