說起檔案上傳，撇開藉助於flash外掛或silverlight外掛或各類瀏覽器自家外掛的上傳元件不說，我們來看看瀏覽器原生的：

早些年大多數人直接使用的瀏覽器的原生上傳元件樣式，但這樣會導致不同瀏覽器下使用體驗不一致，比如下圖：

過了些時候，產品經理覺得太醜陋，各種瀏覽器體驗不和諧，要求開發人員必須使得體驗一致，於是有人就想方設法將<input type="file"/>的樣式修改成絕對定位+ 透明+覆蓋在按鈕上 來實現如下這種上傳元件樣式：

當然了，我測試了各種瀏覽器，樣式與體驗完全保持了一致。

有人說，觸發file輸入框的dom.click()可以彈出檔案選擇框也能夠選擇檔案啊，為什麼要搞得這麼麻煩蓋一層透明的東西在上面來觸發呢？原因是IE和早些版本的現代瀏覽器（chrome,firefox,safari等）對於這種方式提交的表單一律拒絕了，原因就是涉及到安全問題！（但是新版本的chrome與firefox瀏覽器已經放開了這個限制，可以上傳了），但為了相容舊版的IE，我們當時只能通過這種蹩腳的招數來實現，而且這也是目前大多數前端開發人員的做法，例如百度圖片的上傳就是這麼做的：

但是，現在有一個更簡單易用的方式來實現這個效果，那就是label標籤的for屬性！相信有很多人都知道label標籤的for屬性是幹什麼用的了，最重要的是這個屬性包括IE6在內的所有瀏覽器都支援。相信你也猜到了我想說什麼了？是的，我想說的就是用 label 的 for 屬性來觸發這個檔案輸入框的點選事件。我們只需定製一下這個label標籤的樣式，利用 它的for = "檔案輸入框的id" ，將檔案輸入框給絕對定位到十萬八千里之外或者直接隱藏它（IE8等低版本瀏覽器不支援隱藏，會導致點了沒有反應）就行嘍~

實現出的樣式如下圖所示：

這個變黃的瀏覽按鈕就是一個普通的label標籤而已，於是，想將上傳元件定製成什麼樣子，還不是我們說了算？嘿嘿！~