HTML5 裡面對於文件上傳有了極大的增強，曾幾何時，當我們需要實現一個多文件雙傳功能，必須一次指定多個<input type="file>，如果要上傳10個文件就必須指定10行，因為HTML4 裡面，所有的<input type="file>只支持單個文件選擇、
但是在HTML5裡面，可以給<input type="file"> 加上一個multiple屬性，這樣這個空間就直接支持多文件上傳了.廢話不多說，獻上代碼：
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>HTML5 對於多文件選擇的增強Demo</title>
- <script type="text/javascript" src="js/fileops.js"></script>
- </head>
- <p>multiple文件選擇 FileList Demo:</p>
- 選擇文件：
- <input type="file" id="multifile" multiple size="80"/>
- <input type="button" onclick="showFileName()" value="文件上傳" />
當點擊button時候，會觸發showFileName()方法，這裡將遍歷所有被選擇的文件，並且依次打印出它們的文件名：
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang ([email protected])
- */
- function showFileName(){
- console.log(" FileList Demo:");
- var file;
- //取得FileList取得的file集合
- for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){
- //file對象為用戶選擇的某一個文件
- file=document.getElementById("multifile").files[i];
- //此時取出這個文件進行處理，這裡只是顯示文件名
- console.log(file.name);
- }
- }
然後當點擊“選擇文件”按鈕時，則會彈出一個對話框，讓你選擇，這時候，你可以按住Ctrl鍵並且點擊鼠標左鍵點住你想要的文件，從而進行多文件選擇。不少人都在這裡搞不明白為什麼不能選擇多個文件。
650) this.width=650;" border=0>
選中之後，點"打開”，則<input>輸入框中會提示你已經選擇了多少個文件：
650) this.width=650;" border=0>
最後，點擊“文件上傳”按鈕，則會觸發這段JS代碼的最終執行，它用FileList進行遍歷所有被選擇的文件，然後依次在浏覽器控制台打印出文件名，於是，控制台輸出如圖：
650) this.width=650;" border=0>