隨著互聯(lián)網(wǎng)的快速發(fā)展，越來越多的網(wǎng)站都需要支持用戶上傳文件的功能。而傳統(tǒng)的上傳方式需要刷新整個(gè)頁面才能完成文件的上傳，用戶體驗(yàn)較差。為了提供更好的用戶體驗(yàn)，Ajax技術(shù)應(yīng)運(yùn)而生。Ajax可以實(shí)現(xiàn)文件的異步上傳，無需刷新頁面即可完成上傳操作。本文將介紹如何使用Ajax上傳多個(gè)文件，并給出相應(yīng)的代碼示例。

在實(shí)際的項(xiàng)目中，有時(shí)候用戶需要一次性上傳多個(gè)文件，這就需要我們實(shí)現(xiàn)多文件上傳的功能。下面是一個(gè)示例：假設(shè)我們的網(wǎng)站需要支持用戶批量上傳圖片，用戶可以一次性選擇多個(gè)圖片文件進(jìn)行上傳。通過Ajax技術(shù)，可以實(shí)現(xiàn)在不刷新頁面的情況下，將選中的多個(gè)圖片文件上傳至服務(wù)器。

// HTML代碼
<input type="file" id="uploadFile" multiple>
<button id="uploadBtn">上傳</button>
// JavaScript代碼
document.getElementById('uploadBtn').addEventListener('click', function() {
var files = document.getElementById('uploadFile').files;
var formData = new FormData();
for (var i = 0; i< files.length; i++) {
formData.append('file[]', files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (xhr.status === 200) {
alert('文件上傳成功');
} else {
alert('文件上傳失敗');
}
}
xhr.send(formData);
});

上述代碼中，我們先在HTML中定義了一個(gè)用于選擇文件的input元素，并設(shè)置multiple屬性，這樣用戶在選擇文件時(shí)可以同時(shí)選擇多個(gè)文件。然后在JavaScript中，我們使用addEventListener方法為上傳按鈕綁定了一個(gè)點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊上傳按鈕時(shí)，我們通過document.getElementById獲取文件選擇框的DOM元素，并使用files屬性獲取用戶選擇的多個(gè)文件。接下來，我們創(chuàng)建一個(gè)FormData對(duì)象，用于將文件數(shù)據(jù)送往服務(wù)器。通過for循環(huán)遍歷用戶選擇的文件，將每個(gè)文件添加到FormData對(duì)象中，使用append方法傳入'file[]'作為鍵名，表示上傳的是一個(gè)文件數(shù)組。最后，我們創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，設(shè)置請(qǐng)求方式為POST，請(qǐng)求地址為/upload。當(dāng)請(qǐng)求完成時(shí)，通過onload事件進(jìn)行處理：如果返回狀態(tài)碼為200，彈出“文件上傳成功”的提示信息；否則，彈出“文件上傳失敗”的提示信息。

這樣，用戶一旦選擇好需要上傳的多個(gè)文件，并點(diǎn)擊上傳按鈕，就能夠?qū)⑦@些文件異步地上傳至服務(wù)器。相比于傳統(tǒng)的上傳方式，使用Ajax上傳多個(gè)文件更加便捷高效，大大提升了用戶的使用體驗(yàn)。

Ajax上傳多個(gè)文件是實(shí)現(xiàn)網(wǎng)站文件上傳功能的常見需求，通過上述示例我們可以清晰地了解到實(shí)現(xiàn)該功能的基本步驟和代碼。在實(shí)際開發(fā)中，開發(fā)人員可以根據(jù)具體的業(yè)務(wù)需求對(duì)代碼進(jìn)行進(jìn)一步的擴(kuò)展和優(yōu)化，以滿足不同的功能需求。希望本文對(duì)大家理解和使用Ajax上傳多個(gè)文件有所幫助。