HTMLInputElement：files 属性

HTMLInputElement.files 属性允许您访问使用 <input type="file"> 元素选择的 FileList。

值

一个 FileList 对象，列出所选文件（如果有），或者如果 HTMLInputElement 不是 type="file" 则为 null。

示例

下面的示例演示了如何访问 HTMLInputElement.files 属性并记录用户选择的每个文件的名称、修改日期、大小和类型。

HTML

html

<input id="files" type="file" multiple />

JavaScript

请注意，即使没有选择任何文件，HTMLInputElement.files 仍然返回 FileList 的实例。因此，可以使用 for...of 安全地遍历它，而无需检查是否选择了任何文件。

const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // true even if empty

for (const file of fileInput.files) {
  console.log(file.name); // prints file name
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // prints legible date
  console.log(
    file.size < 1000 ? file.size : Math.round(file.size / 1000) + "KB",
  );
  console.log(file.type); // prints MIME type
}

规范

规范
HTML 标准 # dom-input-files-dev

浏览器兼容性

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

另请参阅

DataTransfer.files