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只读-
一个只读值，指示列表中文件的数量。
实例方法
示例
记录文件名
在此示例中，我们将记录用户选择的所有文件的名称。
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}`;
}
});
结果
规范
| 规范 |
|---|
| File API # filelist-section |
| HTML # dom-input-files-dev |
浏览器兼容性
加载中…