思路：
原文出處：http://www.haorooms.com/post/css_input_uploadmh
input file上傳按鈕的美化思路是，先把之前的按鈕透明度opacity設置為0,然后，外層用div包裹，就實現了美化功能。
代碼如下：
DOM結構：
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">點擊這里上傳文件 </a> <a href="javascript:;" class="file">選擇文件 <input type="file" name="" id=""> </a>CSS樣式1：
/*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }樣式2：
.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; }修改后如下：
樣式二：
備注：對於HTML5之input:file，還可以控制上傳的類型的，但是這個是html5的，低版本瀏覽器不支持，詳情請看：HTML5的 input:file上傳類型控制 http://www.haorooms.com/post/input_file_leixing
美化后顯示文件名
上面美化，把默認顯示的文件名也給隱藏掉了，那么如何顯示文件名稱呢？沒關系，我們可以用jquery來獲取文件的文件名。
我們可以寫個change事件
$(".a-upload").on("change","input[type='file']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip").html("").hide(); var arr=filePath.split('\\'); var fileName=arr[arr.length-1]; $(".showFileName").html(fileName); }else{ $(".showFileName").html(""); $(".fileerrorTip").html("您未上傳文件，或者您上傳文件類型有誤！").show(); return false } })