FileList

注意：此功能在Web Workers中可用。

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">Selected files:</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}`;
  }
});

结果

规范

规范
文件 API
# filelist-section
HTML 标准
# dom-input-files-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅