HTML FileList对象

一个 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]
})

从FileList对象中选择任何元素都会得到一个File对象。在本例中，我们只有一个，所以我们选择位置为0的项。

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

const input = document.querySelector('input')

input.addEventListener('change', e => {
  const fileList = input.files
  const theFile = fileList.item(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)
  }
})