在上传文件的时候，一般会在表单中加入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.rarhttp://www.cnitblog.com/Files/CoffeeCat/custom_upload_ie8_fixed.rar此版本支持IE8
Ferris Xu
2009-06-29