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