在過去,上傳文件的時候,我們每次都只能一次選擇一個文件。如果想實現多文件上傳,要麼動態的增加file框要麼使用Flash來代替。現在我們在HTML5中要想實現這個功能,是輕而易舉的事情。
FileList對象:FileList對象,其實就是多個file對象的列表。在HTML5中要想多文件上傳我們只需要在原有的file類型的Input中加入multple屬性即可。
HTML
- <input id="W3Cfuns_FileList" type="file" multiple/>
JavaScript為了能夠讓大家看清楚這個上傳文本框,簡單的寫了一下JS,通過它來遍歷出filelist中的文件,JS看不懂的話也沒有關系,在這裡主要是為了演示此控件的確獲取了多個文件。
- function showFileName()
- {
- var file = document.getElementById("W3Cfuns_FileList");
- for(var i = 0, j = file.files.length; i < j; i++)
- {
- alert(file.files.name);
- }
- }
完整的代碼
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>W3Cfuns_FileList</title>
- <script type="text/javascript">
- function showFileName()
- {
- var file = document.getElementById("W3Cfuns_FileList");
- for(var i = 0, j = file.files.length; i < j; i++)
- {
- alert(file.files.name);
- }
- }
- </script>
- </head>
- <body>
- <input id="W3Cfuns_FileList" type="file" multiple/>
- <button>提交</button>
- </body>
- </html>