JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中遍歷 FileList

一個FileList 是一個類似數組的對象,表示 File 的集合 files 返回的對象 HTML <input> 的屬性 元素。您可以使用它來訪問使用 <input type="file"> 選擇的文件列表 元素。

就像一個 JavaScript 數組,FileListlength 返回列表中文件數的屬性。但是,它不是一個實際的數組。所以你不能使用像 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];

Tutorial JavaScript 教程
  1. 使用 ReasonML 享受無痛打字!

  2. 開源冒險:第 18 集:Imba 2

  3. jQuery 3 中的新功能

  4. 我做了一個投資組合網站!

  5. 用於 TextPad 的 PHP/Javascript 開發工具

  6. Javascript函數運行緩慢

  7. Dojo 路由器簡介

  1. ngx-lazy-dialog:Angular 中的延遲加載對話框

  2. 我從 Telegram 上建立一個擁有 10K 用戶的 COVID-19 機器人中學到的教訓

  3. 快速應用程序位於電子應用程序內的 url 是什麼

  4. 節點包管理器 4 --- 對預發布 (NPM) 的更改

  5. Vue JS - Computed 和 Watch 的區別

  6. 使用 TestCafe 編寫端到端測試的初學者指南

  7. ⬢ 節點任務列表

  1. 如何使用 Angular 設置共享組件的樣式

  2. 如何使用 JQuery 驗證密碼和確認密碼

  3. 字謎生成器

  4. 如何使用 @nuxtjs/strapi 模塊向 Nuxt 應用程序添加身份驗證