一个 FileList 对象通常来自于一个 HTML
MDN<input>
元素的files
属性,你可以通过这个对象访问到用户所选择的文件。该类型的对象还有可能来自用户的拖放操作。
正文
如果您的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)
}
})