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
只读-
指示列表中文件数量的只读值。
实例方法
示例
记录文件名
在此示例中,我们记录用户选择的所有文件的名称。
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