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 使用围绕 ECMAScript 数组类型的类型，因此你可以像 ECMAScript 数组一样对待它们，同时对其使用施加额外的语义（例如使其项目只读）。

实例属性

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

参见