input file上傳文件樣式支持html5的瀏覽器解決方案
我要評(píng)論下面是file上傳控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截圖：
在IE10里，雙擊輸入框或者單擊按鈕都彈出文件選擇框。在其他瀏覽器里單擊輸入框，按鈕或文字都可以觸發(fā)文件選擇框。
鑒于這種混亂情況，有必要要統(tǒng)一樣式和行為。下面是我的兼容性方案。
先看一下最終結(jié)果在各瀏覽器的截圖：
基本思路：創(chuàng)建輸入框和按鈕模擬file上傳控件。將file上傳控件設(shè)置成透明。讓file上傳控件與用于模擬的按鈕右對(duì)齊。修改元素的堆疊順序，讓按鈕處于下面，file上傳控件在中間，輸入框在上面。在文件選擇完畢后將file上傳控件里的值賦給用于模擬的輸入框。
原理：在不同的瀏覽器里，file上傳控件的按鈕的height都是可調(diào)的，而且file上傳控件的右側(cè)都是可以單擊的。所以通過調(diào)節(jié)file上傳控件的height，并調(diào)整file上傳控件的位置（右對(duì)齊），可以讓file上傳控件的可單擊區(qū)域與用于模擬的按鈕完全覆蓋。當(dāng)file上傳控件透明時(shí)用戶單擊用于模擬的按鈕就觸發(fā)了文件選擇框。但同時(shí)file上傳控件的堆疊順序不能先于用于模擬的輸入框，不然當(dāng)用戶將鼠標(biāo)置于所見的輸入框上時(shí)可能會(huì)看到光標(biāo)不是指示文本而是為一個(gè)箭頭（而且為一個(gè)箭頭時(shí)單擊會(huì)彈出文件選擇框），用戶將感到困惑。
實(shí)現(xiàn)：先看看html部分的代碼。
<div id="file">
<input type="text" value="未選擇文件" /><input type="button" value="瀏覽" /><input type="file" />
</div>
然后是css部分的代碼。
#file {
position:relative;
width:226px;
height:25px;
border:1px #99f solid;
}
#file input {
font-size:16px;
margin: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;
}
}
歡迎留言交流或指正。
相關(guān)文章
使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
下面小編就為大家?guī)硪黄褂肏tml5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-17- 本篇文章主要介紹了HTML5拖拉上傳文件的簡(jiǎn)單實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-11
HTML5+WebSocket實(shí)現(xiàn)多文件同時(shí)上傳的實(shí)例
本篇文章主要介紹了HTML5-WebSocket實(shí)現(xiàn)多文件同時(shí)上傳的實(shí)例，HTML5結(jié)合Websocket進(jìn)行文件的傳輸就變得更加方便和靈活，有興趣的可以了解一下。2016-12-29html5 實(shí)現(xiàn)客戶端驗(yàn)證上傳文件的大小(簡(jiǎn)單實(shí)例)
下面小編就為大家?guī)硪黄猦tml5 實(shí)現(xiàn)客戶端驗(yàn)證上傳文件的大小(簡(jiǎn)單實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-15html5拍照功能實(shí)現(xiàn)代碼(htm5上傳文件)
在HTML5規(guī)范的支持下，WebApp在手機(jī)上拍照已經(jīng)成為可能。在下面，我將講解Web App如何用手機(jī)進(jìn)行拍照，顯示在頁面上并上傳到服務(wù)器2013-12-11HTML5上傳文件顯示進(jìn)度的實(shí)現(xiàn)代碼
下面我們使用Html 5的新特性file api實(shí)現(xiàn)上傳文件，并顯示上傳文件進(jìn)度百分比。意圖是這樣的，當(dāng)選擇文件時(shí)，顯示當(dāng)前文件信息2012-08-30- 本文簡(jiǎn)單介紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-05-19