input file上傳檔案樣式支援html5的瀏覽器解決方案_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部分的程式碼。

複製程式碼

程式碼如下:

然後是css部分的程式碼。

複製程式碼

程式碼如下:

#>
;
width:226px;
height:25px;
border:1px #99f solid;
}
#file input {
font-size:16px;
#file input {
font-size:16px; 0;
padding:0;
position:relative;
vertical-align:middle;
outline:none;
}
#file input[type="text"] {
border:3px none;
width:172px;
z-index:4;
}
#file input[type="button"] {
width:54px;
height:25px;
z-index:2;
}
#file input[type="file"] {
position:absolute;
right:0px;
height:25px;
opacity:0;
z-index:3;
}

最後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;
}
}

} } 歡迎留言交流或指正。