CoffeeCat's IT Blog

如何自定义file input控件的样式

    在上传文件的时候,一般会在表单中加入file input表单元素。这个控件的标准视图是一个文本框加上一个浏览按钮,如图:
   
   
    不过,有时为了美化页面,我们常常需要用图片来制作美观的浏览按钮,用户点击这张图片,可以弹出文件选择对话框。例如,开心网的网盘在上传文件时的页面

   

    开心网是用Flash实现的,因为它使用了类似swfupload的控件,可以带进度的上传文件。不过,如果我们不用Flash的话,是否可以实现呢?答案是肯定的。



实现思路

    我们可以将file input控件设置成完全透明,然后,加入一个自定义的浏览按钮,可以是图片。然后,我们定义这个按钮的onmousemove属性,捕获到鼠标移动到上面的时候,我们就将透明的file input控件盖在上面,这样,如果我们点击了,那将点击file input控件,就能弹出文件选择框了。由于file input是透明的,给用户的感觉就是点击了自定义图片而弹出的文件选择框。


关键代码

注:2010-01-01修复了不支持IE8的Bug


<input type="file" id="browse" size="1" style="position:absolute; width:10px; filter:alpha(opacity=0);-moz-opacity:0; top:0px;" />  
<img src="upload.gif" align="absmiddle" onmousemove="document.getElementById('browse').style.top=(event.clientY-10)+'px';document.getElementById('browse').style.left= (event.clientX)+'px';" />




以上代码在IE8和Firefox3测试通过,页面上有1个美化的添加文件按钮,点击这个按钮会弹出文件选择框。


代码下载

http://www.cnitblog.com/Files/CoffeeCat/custom_upload.rar

http://www.cnitblog.com/Files/CoffeeCat/custom_upload_ie8_fixed.rar

此版本支持IE8



Ferris Xu
2009-06-29



posted on 2009-06-29 11:50 CoffeeCat 阅读(4501) 评论(4)  编辑 收藏 引用

评论

# re: 如何自定义file input控件的样式 2009-12-28 16:16 简单

无效,不好意思!firefox和ie8测试不通过!  回复  更多评论   

# re: 如何自定义file input控件的样式 2010-01-01 16:02 CoffeeCat

@简单
Firefox3.0.16下测试了没问题
IE8确实不支持,已经更新了代码,现在支持IE8了  回复  更多评论   

# re: 如何自定义file input控件的样式 2011-03-07 16:28 无语

IE6\IE7\IE8\FF3.6都无效。。。。。。无语  回复  更多评论   

# re: 如何自定义file input控件的样式 2011-12-03 16:18 no

无论IE8 Chrome都不支持  回复  更多评论   

只有注册用户登录后才能发表评论。
<2009年6月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

导航

统计

公告

常用链接

留言簿(183)

随笔档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜