可以通過讓默認的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

?

總結

以上是生活随笔為你收集整理的使用自定义的按钮替换默认的input type='file'的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。