jQuery教程（十二）使用不苛刻的java script代碼實現多檔案上傳

好幾個月以前，當我在追逐互連網上AJAX熱潮的時候，我在 FiftyFourEleven網站上發現了一篇使用創新的java script代碼實現當時正在困擾我的“ 單檔案元素實現多檔案上傳”的文章。

所以當我想寫作《15天漫遊jQuery》的時候，我第一個想到的就是用jQuery實現這個功能。

接觸易用性狂熱愛好者

幾天前當我檢查網站記錄的時候，發現了一條遺漏的文章trackback。跟過去看的時候我發現我的兩篇jQuery文章被作者引用來證明他為什麼討厭java script。

根據這個人的說法，任何工具或技術如果沒有將易用性放在第一位都將成為垃圾。

儘管我很不同意這位仁兄一杆子打死的態度，但他還是讓我對這篇詳細教程有所留意。當我在編寫一個簡單網頁效果的時候，我會盡量小心謹慎的處理。這樣如果網站訪客們決定關閉java script代碼執行功能的時候，他們仍然可以正常使用網站的功能。

關於第一價值的兩個教程

• 使用一個檔案輸入元素實現多檔案上傳，並讓整個互動過程流暢舒適。

• 讓多檔案上傳更加人性化，但要避免以犧牲可用性為代價。關鍵在於使用不苛刻的java script代碼製作多檔案輸入地區。

示範

• 只有一個檔案輸入元素，但添加了jQuery和其他代碼實現較為親近使用者的多檔案上傳功能。

示範一地址

• 在頁面(x)html代碼中使用了多個檔案輸入元素，但通過jQuery調整為與第一個示範類似的顯示頁面效果。優點是代碼是不苛刻的。。。即使關閉了java script執行，使用者也能上傳多個檔案。

示範二地址(這個示範有bug導致無法使用，作者修正了bug，使用這個後面連結查看示範示範二地址(no bug))

解釋

單檔案輸入框

jQuery的$(document).ready() 函數的工作有兩個：

建立一個用來顯示最大允許上傳檔案數的div元素。 尋找檔案上傳框（假設這裡只有一個），然後給它附上一個onChange事件。

$("input[@type=file]").change(function(){doIt(this, fileMax);});

doit()函數（簡單又好記，呵呵~）檢查是否達到了最大檔案數量限制，如果不是，它會隱藏當前檔案輸入框，在父div裡添加一個新的檔案輸入框，將輸入框內的檔案名稱使用id “files_list”作為標記，在最後添加一個“刪除”按鈕。

在DOM樹中導航，我使用jQuery的parent()函數，然後用remove()函數移除元素。我還使用了append()和prepend()函數分別添加檔案名稱和新的輸入框。

兩個關鍵點

- 最大檔案上傳數量設定：

var fileMax = 3;

- 輸入框必須有適當的定位措施：

"file" class="upload" name="fileX[]"/>

這樣弄以後輸入框可疑由訪問者決定添加還是刪除，沒有任何關於id或名稱的操作。當這個表單代碼發送給伺服器端指令碼的時候，相關資訊就已經被存放在了一個數組中了。

多檔案輸入框

首先，檔案允許上傳的數量由頁面中的檔案輸入框的數量決定。其次，你仍然需要通過某種方法為每個輸入框接收到的內容用一個數組存放。

"file" class="upload" name="fileX[]"/>

第二個示範跟前面的比起來最大的不同在於，我遍曆了每個檔案輸入框並在其內容有改動時執行doit()函數。通過遍曆每一個輸入框，我可以為My Code添加有用的額外資訊：輸入框內容在“堆棧”中的順序。

換句話說，當這段代碼執行時，它會特別指定第一個輸入框，或者第二個，抑或第三個。

代碼見下：

$("input[@type=file]:nthoftype("+n+")")

jQuery的靈活性允許我們使用CSS和XPath描述語句定位指定的元素位置。

你會發現當一個檔案被選中時，檔案輸入框都會被檔案名稱覆蓋。點擊檔案名稱就可以選擇其他不同的檔案。