在前端開發(fā)中，批量上傳是一個(gè)常見的需求。隨著技術(shù)的不斷進(jìn)步，現(xiàn)在我們可以通過JavaScript來實(shí)現(xiàn)簡(jiǎn)單易用的批量上傳功能。本文將介紹如何使用JavaScript批量上傳，并通過實(shí)例演示其具體用法。

首先，我們需要定義一個(gè)input標(biāo)簽用于選擇上傳的文件，然后再通過JavaScript來獲取選中的所有文件，并將其上傳至服務(wù)器。

<input type="file" multiple="" onchange="uploadFiles()">
function uploadFiles () {
var files = document.querySelector('input[type="file"]').files;
for (var i = 0; i< files.length; i++) {
// 上傳代碼
}
}

在上述代碼中，我們首先定義了一個(gè)input標(biāo)簽，并設(shè)置其type為file，并添加了multiple屬性，這樣用戶就可以一次選擇多個(gè)文件。然后在onchange事件中調(diào)用了名為uploadFiles的函數(shù)，該函數(shù)會(huì)在用戶選擇完文件后自動(dòng)被調(diào)用。

接下來，我們通過querySelector來獲取選中的所有文件，并通過for循環(huán)來遍歷所有文件。在循環(huán)中，我們可以實(shí)現(xiàn)具體的上傳功能，比如使用XMLHttpRequest來發(fā)送POST請(qǐng)求，將文件上傳至服務(wù)器。

function uploadFiles () {
var files = document.querySelector('input[type="file"]').files;
for (var i = 0; i< files.length; i++) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file', files[i]);
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (xhr.status === 200) {
alert('上傳成功');
} else {
alert('上傳失敗');
}
};
xhr.send(formData);
}
}

在上述代碼中，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，并定義了一個(gè)FormData對(duì)象，用于存儲(chǔ)上傳文件的內(nèi)容。接著，我們使用append方法將選中的文件添加到FormData對(duì)象中，并使用XMLHttpRequest對(duì)象的open方法來設(shè)置上傳文件的請(qǐng)求頭信息。同時(shí)，我們也需要定義一個(gè)onload方法，在上傳成功或失敗時(shí)進(jìn)行相應(yīng)的處理。

需要注意的是，上傳文件的請(qǐng)求頭中需要添加Content-Type字段，表示上傳文件的MIME類型。例如，如果上傳的是圖片，則Content-Type應(yīng)為：image/jpeg、image/png等。

總的來說，使用JavaScript批量上傳文件是一個(gè)非常方便且實(shí)用的技術(shù)，無論在網(wǎng)站開發(fā)還是業(yè)務(wù)開發(fā)中都有非常廣泛的應(yīng)用。在實(shí)際開發(fā)中，我們可以根據(jù)具體需求進(jìn)行相應(yīng)的優(yōu)化，比如限制文件大小、文件格式驗(yàn)證等。通過這些技巧，我們可以輕松地實(shí)現(xiàn)一個(gè)高效、穩(wěn)定的批量上傳系統(tǒng)。