點評：最近在使用file上傳控件，發現了file上傳控件的兩個兼容性問題:一個是file上傳控件在火狐下無法通過css改變width，另一個是file上傳控件在不同的瀏覽器下的外觀和行為都不一樣,本文將提供詳細的解決方案

復制代碼

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

復制代碼

#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;
}

復制代碼

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