FileList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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>
規範
| Specification |
|---|
| File API # filelist-section |
| HTML # dom-input-files-dev |