JavaScript作為前端開發(fā)語言的重要組成部分，負責實現(xiàn)與用戶互動以及頁面效果等各種功能。而處理本地文件操作也是其中的一項常見需求，而在處理文件上傳時，F(xiàn)ileList對象成為必不可少的一環(huán)。

FileList對象是由file控件元素選擇文件后，瀏覽器自動生成的對象。FileList對象本身是一個類數(shù)組（Array-like）的數(shù)據(jù)結(jié)構(gòu)，可以包含一個或者多個File對象，并提供了一些基本的方法供開發(fā)者進行文件操作。

我們來看一個具體的例子來說明FileList的應(yīng)用，以下是一段實現(xiàn)批量上傳的代碼：

function uploadFiles(files) {
var formData = new FormData()
for (var i = 0; i< files.length; i++) {
formData.append('files[]', files[i])
}
//發(fā)送請求，上傳文件
//...
}
var input = document.querySelector('#file-input')
input.addEventListener('change', function() {
var files = this.files
uploadFiles(files)
})

上述代碼中，我們首先通過`document.querySelector('#file-input')`獲取到了文件上傳的input元素，然后給它綁定了一個`'change'`事件處理函數(shù)。當用戶選擇了文件后，觸發(fā)了`'change'`事件，我們通過`this.files`獲取到了上傳的文件列表。接著，我們創(chuàng)建了一個FormData對象，將每個文件遍歷至FormData對象中，最后通過發(fā)送請求上傳文件。

接下來我們再來看看FileList對象的具體屬性和方法。

屬性

FileList.length

FileList對象的length屬性，表示一個FileList對象包含的File對象的數(shù)量。例如：

var input = document.querySelector('#file-input')
console.log(input.files.length) // 輸出選擇文件個數(shù)

方法

FileList.item(index)

FileList對象提供的item()方法，用于獲取指定位置的File對象，其中index代表一個0-based的索引值。例如：

var input = document.querySelector('#file-input')
var files = input.files
var firstFile = files.item(0)
console.log(firstFile.name) // 輸出第一個文件的文件名

FileList.entries()

FileList對象提供的entries()方法，返回一個迭代器對象，迭代器每次遍歷時返回一個數(shù)組，該數(shù)組的第一個元素是文件的索引值，第二個元素是File對象本身。例如：

var input = document.querySelector('#file-input')
var files = input.files
var iterator = files.entries()
for (let [index, file] of iterator) {
console.log('第 ' + index + ' 個文件的文件名為：', file.name)
}

FileList.values()

FileList對象提供的values()方法，返回一個迭代器對象，迭代器每次遍歷時返回一個File對象。例如：

var input = document.querySelector('#file-input')
var files = input.files
var iterator = files.values()
for (let file of iterator) {
console.log('文件名為：', file.name)
}

FileList.forEach()

FileList對象提供的forEach()方法，迭代遍歷每一個File對象，并執(zhí)行指定的回調(diào)函數(shù)。例如：

var input = document.querySelector('#file-input')
var files = input.files
files.forEach(function(file, index, fileList) {
console.log('第 ' + index + ' 個文件的文件名為：', file.name)
})

上述內(nèi)容便是關(guān)于JavaScript中FileList對象的介紹，希望本文能夠幫助到你在日常前端開發(fā)中的使用。