如何在 JavaScript 中遍歷 FileList
一個FileList
是一個類似數組的對象,表示 File
的集合 files
返回的對象 HTML <input>
的屬性 元素。您可以使用它來訪問使用 <input type="file">
選擇的文件列表 元素。
就像一個 JavaScript 數組,FileList
有 length
返回列表中文件數的屬性。但是,它不是一個實際的數組。所以你不能使用像 slice()
這樣的普通數組的方法 , map()
, filter()
, 或 forEach()
在 FileList
對象。
假設您有以下 HTML 元素:
<input type="file" id="avatars" multiple>
使用上述輸入元素遍歷所有選定的文件(FileList
object),你可以使用經典的for循環,如下所示:
const input = document.querySelector('#avatars');
// Retrieve FileList boject
const files = input.files;
// Loop through files
for (let i = 0; i < files.length; i++) {
let file = files.item(i);
console.log(file.name);
}
item()
方法返回一個 File
表示文件列表中指定索引處的文件的對象。您還可以使用索引符號 (files[i]
)。
轉換FileList
到一個數組
當您轉換 FileList
將對象放入數組中,您可以使用所有數組方法,例如 forEach()、map()
, 和 filter()
.
有多種方法可以轉換 FileList
到一個數組。我已經在 NodeList 到數組的轉換文章中解釋了這些方法。
Array.from() 就是這樣一種方法,它接受一個類似對象的數組作為輸入並返回一個數組:
const input = document.querySelector('#avatars');
// Retrieve FileList boject
const files = input.files;
// Convert FileList to array
const arr = Array.from(files);
// Loop through array
arr.forEach(file => console.log(file.name));
或者,您還可以擴展運算符語法以轉換 FileList
到一個數組:
const arr = [...files];