這篇文章將為大家詳細(xì)講解有關(guān)input file上傳文件樣式支持html5的瀏覽器解決方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如成都工商代辦等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致稱揚(yáng)。

最近在使用畫布處理圖像像素時(shí)用到了file上傳控件，發(fā)現(xiàn)了file上傳控件的兩個(gè)兼容性問(wèn)題。一個(gè)是file上傳控件在火狐下無(wú)法通過(guò)css改變width，另一個(gè)是file上傳控件在不同的瀏覽器下的外觀和行為都不一樣。

在IE10里，雙擊輸入框或者單擊按鈕都彈出文件選擇框。在其他瀏覽器里單擊輸入框，按鈕或文字都可以觸發(fā)文件選擇框。
鑒于這種混亂情況，有必要要統(tǒng)一樣式和行為。下面是我的兼容性方案。
先看一下最終結(jié)果在各瀏覽器的截圖：

基本思路：創(chuàng)建輸入框和按鈕模擬file上傳控件。將file上傳控件設(shè)置成透明。讓file上傳控件與用于模擬的按鈕右對(duì)齊。修改元素的堆疊順序，讓按鈕處于下面，file上傳控件在中間，輸入框在上面。在文件選擇完畢后將file上傳控件里的值賦給用于模擬的輸入框。
原理：在不同的瀏覽器里，file上傳控件的按鈕的height都是可調(diào)的，而且file上傳控件的右側(cè)都是可以單擊的。所以通過(guò)調(diào)節(jié)file上傳控件的height，并調(diào)整file上傳控件的位置（右對(duì)齊），可以讓file上傳控件的可單擊區(qū)域與用于模擬的按鈕完全覆蓋。當(dāng)file上傳控件透明時(shí)用戶單擊用于模擬的按鈕就觸發(fā)了文件選擇框。但同時(shí)file上傳控件的堆疊順序不能先于用于模擬的輸入框，不然當(dāng)用戶將鼠標(biāo)置于所見(jiàn)的輸入框上時(shí)可能會(huì)看到光標(biāo)不是指示文本而是為一個(gè)箭頭（而且為一個(gè)箭頭時(shí)單擊會(huì)彈出文件選擇框），用戶將感到困惑。
實(shí)現(xiàn)：先看看html部分的代碼。

代碼如下:

然后是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上傳控件獲得的文件路徑顯示到可見(jiàn)的輸入框里。

代碼如下:

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)于input file上傳文件樣式支持html5的瀏覽器解決方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。