翻譯不完整。請協助 翻譯此英文文件。
FileList
型別物件通常來自 HTML <input>
元素 DOM
物件的 files
屬性(property)。你可以操作 FileList
物件來存取使用者透過 <input type="file">
元素所選取的檔案,或由拖放操作所產生的檔案(請參考 DataTransfer
物件的更多使用細節)。
註:在 Gecko 1.9.2 之前,<input>
元素只支援一次選取一個檔案,這代表了 FileList
只能夠包含一個 File
物件。從 Gecko 1.9.2 開始,假如 <input>
元素的 multiple
屬性(attribute)為 true,則 FileList 就可能會包含多個檔案。
使用 FileList
所有 <input>
元素節點的 DOM
物件都擁有 files
屬性(property),此屬性即為 FileList
,是一個可藉此存取使用者選取之檔案的類陣列物件。以下範例展示了一個 type
屬性(attribute)值為 file
的 HTML <input>
元素:
<input id="fileItem" type="file">
下面範例演示了如何取得 <input>
元素節點中所包含的第一個 File
型別物件:
var file = document.getElementById('fileItem').files[0];
方法概觀
File item(index); |
屬性
屬性名稱 | 型別 | 描述 |
length |
integer |
表示 FileList 物件中的檔案數量,唯讀。 |
方法
item()
回傳 FileList
中指定索引的 File
物件。
File item( index );
參數
index
- 要取得的檔案之索引(起始於零)。
回傳值
要求的 File
物件。
範例
此範例演示了迭代所有之使用者於 <input>
元素選取的檔案:
// fileInput is an HTML input element: <input type="file" id="myfileinput" multiple> var fileInput = document.getElementById("myfileinput"); // files is a FileList object (similar to NodeList) var files = fileInput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { // get item file = files.item(i); //or file = files[i]; alert(file.name); }
以下是更完整的範例:
<!DOCTYPE HTML> <html> <head> </head> <body> <!--multiple is set to allow multiple files to be selected--> <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // love the query selector var fileInput = document.querySelector("#myfiles"); var files = fileInput.files; // cache files.length var fl=files.length; var i=0; while ( i < fl) { // localize file var in the loop var file = files[i]; alert(file.name); i++; } } // set the input element onchange to call pullfiles document.querySelector("#myfiles").onchange=pullfiles; //a.t </script> </html>
規範
- File upload state (HTML5 working draft)