使用jQuery改進檔案上傳控件

使用css來美化表單元素時，一直沒有好的方法來美化檔案上傳控制項。 http://www.quirksmode.org/dom/inputfile.html (網站好像出錯)提供了美化檔案上傳控制項的方法。本人在該方法的啟發之下，結合自己的項目，將其功能更加完善，經過改善之後，其具有以下特點：

1. 使用者所見並不是文件上傳按鈕，而是按鈕；
2. 可以對圖片的格式進行限制；
3. 使用者選擇的圖片可以顯示在特定區域之中（IE6、safari、opera除外）；
4. 在使用者停用js的情況下檔案上傳控制項保持可用狀態。

本人將其進行封裝成一個jQuery插件，因網上已經有一個叫jQuery.fakeFile的插件，為了與其區分開來，我將並將其命名為jQuery.liveFakeFile。這篇文章將介紹此方法的原理和使用方法。

一、需求

需求很簡單，但實現起來需要一定要技巧，簡述如下：

1. 要求不出現文件上傳控件，而是一個“上傳圖片”的按鈕，用戶單擊該按鈕時彈出圖片對話框；
2. 選擇圖片後，圖片在按鈕上方顯示出來，預設情況下，顯示預設的圖片；
3. 對所選的圖片進行格式判斷，一旦不符合要求，在按鈕下方顯示錯誤訊息，並顯示預設的圖片。

二、分析

實現點擊按鈕彈出選擇圖片對話框效果

文字上傳控制項前面有一輸入框，受Michael McGrady ( ljzcome曾翻譯過此文)的啟示，我們創建「上傳圖片」按鈕，然後改變文件上傳控制項的opacity屬性，將其設為0，並透過定位屬性使點擊區域位於按鈕上方。這樣，使用者的每一次點擊看似是點擊的按鈕，實則是文字上傳控製本身。

顯示使用者選擇的圖片

要顯示圖片看似簡單，但哥哥瀏覽器之間存在差異，IE6並不能正確顯示圖片，IE7可以透過使用濾鏡AlphaImageLoder使其顯示。而Firefox也無法正常顯示圖片，但它有一個方法可以讓圖片顯示—getAsDataURL()。其他瀏覽器opera、safari也無法正常顯示圖片。所以我們使用瀏覽器嗅探技術對不同的瀏覽器分別處理，對無法正常顯示圖片的瀏覽器讓其顯示文字即可。

判斷圖片格式

只需在觸發文件上傳控制項的change事件時通過正規表示式驗證即可，一旦符合格式要求即將圖片或提示文字顯示出來，否則顯示錯誤提示訊息。

可用性分析

因為是透過js來改變檔案上傳控制項的外觀，那麼就必須確保使用者在停用js的情況下能正常上傳圖片。所以在html結構中我們放置的應該是正常的檔案上傳控制項。