使用自定义的按钮替换默认的<input type='file'>

可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果:

将它写成一个jQuery插件:

(function($){
$.fn.browseElement = function(){
var input = $("<input type='file' multiple>");

input.css({
"position":     "absolute",
"z-index":      2,
"cursor":       "pointer",
"-moz-opacity": "0",
"filter":       "alpha(opacity: 0)",
"opacity":      "0"
});

input.mouseout(function(){
input.detach();
});

$(this).mouseover(function(){
input.css($(this).offset());
input.width($(this).outerWidth());
input.height($(this).outerHeight());
$("body").append(input);
});

return input;
};
})(jQuery);

注意: 使用input.offset($(this).offset),会产生bug,常常出现两倍的左侧距离,还是使用.css方法

然后在页面中自定义一个上传按钮:

#attach {
width:100px;
height:30px;
border:1px solid #00B7FF;
background:#cae2fd;
border-radius:4px;
color:#00B7FF;
font-size:12px;
line-height:30px;
text-align:center;
margin:auto;
padding:0
}
<div id="attach">选择文件</div>

然后对该按钮调用扩展的browseElement方法:

var hiddenInput = $('#attach').browseElement();

hiddenInput.change(function(){
//上传文件时相关处理代码
});

完整代码在:
http://pan.baidu.com/s/1mgwQpew