最近開發一個html5 斷點續傳功能，需要自定義一個上傳按鈕，就是不能使用瀏覽器自帶的那個比較丑陋的file標簽當做用戶選擇文件的按鈕，看了下各大網站，發現最好的辦法就是設置file標簽為透明，覆蓋在一個自定義好的按鈕上，使用戶感覺點擊的是自定義按鈕，其實就是點擊的file標簽，使用個定位很容易實現，但問題來了，可點擊的按鈕通常需要顯示小手，給file加個小手樣式，不管用，因為他的瀏覽按鈕前面那部分永遠顯示輸入光標狀態，然后就想到把file的預覽按鈕定位到自定義按鈕上，結果樣式出現了各種頭疼問題，最后還是完美解決了，具體看下面代碼，注意看注釋哦！！！
注意：可能有人會說直接用個自定義標簽被點擊是執行以下一個隱藏file標簽的click方法就ok了，其實這不是很完滿的實現，這樣選擇進去的文件在ie下是沒法通過表單提交到服務端的，由於瀏覽器安全限制，必須是用戶點擊的file標簽選擇的文件才能post到后端。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <title>ajax上傳文件--按鈕顯示小手</title> </head> <body> <div style="width:500px;margin:100px auto;"> <!-- 按鈕相關標簽結構在下面的a標簽中--> <a href="javascript:void(0);" style="display:block;width:100px;height:45px;position:relative;overflow:hidden;text-decoration:none;"> <!--下面的按鈕就是所看到的按鈕--> <input type="button" value="上傳" style="width:100px;height:45px;font-size:20px;"> <!--下面的file標簽設置為完全透明覆蓋在上面的按鈕上，用戶點擊按鈕其實就是點擊的file標簽，為了讓鼠標在按鈕上所有瀏覽器都顯示小手，我們必須把file標簽的預覽按鈕定位到按鈕上，而且要足夠大;注意：這里千萬別給file標簽加width樣式，否則你的小手樣式將無法兼容所有瀏覽器--> <input type="file" name="file" style="height:45px;font-size:100px;position:absolute;cursor:pointer;top:0;right:0;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;z-index:2;"> </a> </div> </body> </html>