HTML5實例教程：FileList對象實例代碼

2024-09-05 07:18:33

字體：大中小

來源：轉載

供稿：網友

網頁制作Webjx文章簡介：在過去，上傳文件的時候，我們每次都只能一次選擇一個文件。如果想實現多文件上傳，要么動態的增加file框要么使用Flash來代替。現在我們在HTML5中要想實現這個功能，是輕而易舉的事情。

在過去，上傳文件的時候，我們每次都只能一次選擇一個文件。如果想實現多文件上傳，要么動態的增加file框要么使用Flash來代替?，F在我們在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>

上一篇：HTML5實例教程:OL標簽的start屬性和reversed屬性

下一篇：HTML5實例教程：figure標簽使用實例