可以通过让默认的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