1. 犀牛前端部落首页
  2. Html5百科

HTML FileList对象

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)
  }
})

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3310.html

发表评论

登录后才能评论