HTML5實(shí)例教程：FileList對象實(shí)例代碼

2024-09-05 07:18:33

字體：大中小

供稿：網(wǎng)友

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

在過去，上傳文件的時(shí)候，我們每次都只能一次選擇一個(gè)文件。如果想實(shí)現(xiàn)多文件上傳，要么動態(tài)的增加file框要么使用Flash來代替。現(xiàn)在我們在HTML5中要想實(shí)現(xiàn)這個(gè)功能，是輕而易舉的事情。

FileList對象：
FileList對象，其實(shí)就是多個(gè)file對象的列表。在HTML5中要想多文件上傳我們只需要在原有的file類型的Input中加入multple屬性即可。

HTML
<input id="W3Cfuns_FileList" type="file" multiple/>

JavaScript
為了能夠讓大家看清楚這個(gè)上傳文本框，簡單的寫了一下JS，通過它來遍歷出filelist中的文件，JS看不懂的話也沒有關(guān)系，在這里主要是為了演示此控件的確獲取了多個(gè)文件。
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實(shí)例教程:OL標(biāo)簽的start屬性和reversed屬性

下一篇：HTML5實(shí)例教程：figure標(biāo)簽使用實(shí)例