FileList

备注： 此特性在 Web Worker 中可用。

FileList 接口表示由 HTML <input> 元素的 files 属性返回的该类型的对象；这使你可以访问使用 <input type="file"> 元素选择的文件列表。它还用于使用拖放 API 中放入 Web 内容中的文件列表；有关此用法的详细信息，请参阅 DataTransfer 对象。

所有 <input> 元素节点都有一个 FileList 类型的 files 属性，其允许访问此列表中的项目。例如，如果 HTML 包含以下文件输入框：

html
<input id="fileItem" type="file" />

以下代码行将节点文件列表中的第一个文件作为 File 对象获取：

js
const file = document.getElementById("fileItem").files[0];

此接口试图创建不可修改的列表，为了不破坏已经使用该接口的代码，才继续支持该接口。现代 API 使用基于 JavaScript 数组的类型来表示列表结构，从而提供许多数组方法，同时对其使用施加额外的语义（例如使其项目为只读）。

这些历史原因并不意味着你作为开发人员应该避免使用 FileList。你不会自己创建 FileList 对象，而是从诸如 HTMLInputElement.files 之类的 API 获取它们，并且这些 API 并未弃用。但是，请注意与真实数组的语义差异。

实例属性

length 只读

指示列表中文件数量的只读值。

实例方法

item()

返回一个 File 对象，表示文件列表中指定索引处的文件。

示例

记录文件名

在此示例中，我们记录用户选择的所有文件的名称。

HTML

html
<input id="myfiles" multiple type="file" />
<pre class="output">选定的文件：</pre>

CSS

css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

js
const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");

fileInput.addEventListener("change", () => {
  for (const file of fileInput.files) {
    output.innerText += `\n${file.name}`;
  }
});

结果

规范

Specification
File API
# filelist-section
HTML Standard
# dom-input-files-dev

浏览器兼容性

BCD tables only load in the browser

参见