1. 面向开发者的 Web 技术
  2. Web API
  3. FileList

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

FileList

基线 广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

备注： 此特性在 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}`;
  }
});

结果

规范

规范
File API
# filelist-section
HTML
# dom-input-files-dev

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题