了解什麼是 FileList 物件以及如何使用它
當您在 HTML 表單中使用 <input type="file" />
元素時,當使用者上傳一個或多個檔案時,您將會與 FileList 物件互動。
不只有這種情況可以得到 FileList 物件,透過拖放操作時也會取得 FileList。
而對於表單, 元素預設不允許上傳多個檔案。
您可以使用以下語法檢索只包含一個元素的 FileList:
<input type="file" />
const input = document.querySelector('input');
input.addEventListener('change', e => {
const fileList = input.files;
const theFile = fileList[0];
});
從 FileList 物件中選擇任何元素將取得一個 File
物件。在這種情況下,我們只有一個元素,所以我們選擇在 0 的位置處的項目。
您也可以使用 item()
方法檢索它,指定索引:
const input = document.querySelector('input');
input.addEventListener('change', e => {
const fileList = input.files;
const theFile = fileList.item(0);
});
然而,如果啟用了 multiple,即使用了 multiple
屬性(<input type="file" multiple />
),FileList 將包含多個元素。
您可以通過查看 FileList
的 length
特性來獲取計數。
此範例載入上傳的檔案並對它們進行迭代,以打印每個檔案的名稱:
<input type="file" multiple />
const input = document.querySelector('input');
input.addEventListener('change', e => {
const files = input.files;
const filesCount = fileList.length;
for (let i = 0; i < files.length; i++) {
const file = files[i];
alert(file.name);
}
});