自定义文件框的样式改进版（兼容IE与FireFox）

原生的文件上传框<input type="" />的效果不是很好看，

很多时候，需要改变样式，让它符合客户的要求。比如浏览按钮换成自定义的图片。

网上有一种错误的做法是，把文件上传框设置为隐藏，然后自定义一个文本框和一个按钮，点击按钮时用

js代码调用文件框的click事件弹出选择文件的效果。

这样做纯粹只能看看效果而已，因为浏览器考虑到所谓的安全因素，文件框只能是用户选择用鼠标点击，选择文件后

才能提交到服务器，否则提交表单时，浏览器会把文件框清空。

(经测试，用js获得对象，再住对象内添加html代码的方式也不能够正常上传)


不过有个高手想出了一个替代方案

就是把文件框设置为透明，并让其定位在一张定义好的图片按钮上，这种方案确实可行。

但是这种方案也有些限制，即按钮图片必须要根文件框的浏览按钮差不多的宽高。为什么了？

这是因为控制文件框宽高的样式不怎么好用，可能各个浏览器有各自的hack写法（没具体研究过）。

在这种可行方案的基础上，我做了如下改进，改进后对按钮图片基本无限制

先讲下思路：让文件框在按钮上随鼠标移动而移动，以保证无论用户点击按钮的哪个部位都能弹出文件选择框
。

具体代码如下

/**

 * 给文件框绑定到自定义按钮上

 * customerBtnId :自定义按钮的ID

 * fileInputId:文件件框ID

 * textInputId:文本框ID，文件框的value值在这个文本框中显示

 */

function bindFileInput(customerBtnId,fileInputId,textInputId){

    //添加事件监听函数

    var addListener=function(element,eventName,funName){

       if(window.addEventListener){

           element.addEventListener(eventName,funName,false);

       }else if(window.attachEvent){

           element.attachEvent('on'+eventName,funName);

       }else{

           element['on'+eventName]=funName;

       }

    }

    var render=function(){

       var fileInput=document.getElementById(fileInputId),

       customerBtn=document.getElementById(customerBtnId);

       fileInput.style.cssText="filter:alpha(opacity=0);opacity:0;"+

       "position:absolute;display:none;cursor:pointer;z-index:10;";

       fileInput.size=1;

       //当用户选择文件后，把文件框的value值显示到指定的文本框中

       addListener(fileInput,'change',function(){

           document.getElementById(textInputId).value=fileInput.value;

       });

       //当鼠标移上自定义按钮时，显示文件框

       addListener(customerBtn,'mouseover',function(){

           fileInput.style.display='block';

       });

       //当鼠标在按钮上移动时，让文件框跟随鼠标移动

       addListener(customerBtn,'mousemove',function(event){

           event=event||window.event;

           fileInput.style.left=event.clientX-50+'px';

           fileInput.style.top=event.clientY-10+'px';

       });

       //当鼠标离开文件框时，让文件框隐藏

       addListener(fileInput,'mouseout',function(){

           fileInput.style.display='none';

       });

    }

    addListener(window,'load',render);

}
 示例代码

<script type="text/javascript">

bindFileInput('browserBtn','file','filename');

</script>

<input type=file name="file" id="file" />

<input type="text"  id="filename" />

<input type="button" value="浏览..." class="submit" id="browserBtn" />

 

评论

2 楼 Jantol 2013-11-27  

有个问题文件框 大的话  会造成操作困扰

1 楼 Jantol 2013-11-26  

很好，刚好用上。