HTML 文件列表对象

FileList 对象通常派生自 HTML 元素<input> 的 files 属性，可以通过该对象访问用户选择的文件。用户也可以拖放这种类型的对象。

MDN

文字

如果您有一个包含元素的 HTML 表单，当用户上传一个或多个文件时，您将获得一个 FileList 对象。

另外，当你拖拽上传文件时，你也会得到一个FileList对象。

根据表单，默认输入类型不允许上传多个文件。

您正在检索仅包含一个元素的文件列表，您可以使用以下语法检索它：

<input type="file" />

const input = document.querySelector('input')

input.addEventListener('change', e => {
  const fileList = input.files
  const theFile = fileList[0]
})

<input type="file" />

const input = document.querySelector('input')

input.addEventListener('change', e => {
  const fileList = input.files
  const theFile = fileList[0]
})

选择FileList对象的任意元素都会得到一个File对象。在本例中，我们只有一个，因此我们选择位置为 0 的项目。

您还可以使用 item() 方法检索它，并指定索引：

const input = document.querySelector('input')

input.addEventListener('change', e => {
  const fileList = input.files
  const theFile = fileList.item(0)
})

<input type="file" />

const input = document.querySelector('input')

input.addEventListener('change', e => {
  const fileList = input.files
  const theFile = fileList[0]
})

如果启用 multiple，则使用 multiple 属性 ()，FileList 将包含多个元素。 您可以通过查看 FileList 的 length 属性来获取长度。 此示例包含上传的文件并迭代以打印每个文件的名称：

<input type="file" multiple />

const input = document.querySelector('input')

input.addEventListener('change', e => {
  const files = input.files
  const filesCount = fileList.length

  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    alert(file.name)
  }
})