Ajax提交多個文件上傳是一種常見且有用的技術，它允許我們在不刷新整個頁面的情況下，通過異步發(fā)送多個文件到服務器進行上傳。通過這種方式，用戶可以更加快速方便地上傳多個文件，提高了用戶體驗。本文將介紹如何使用Ajax來實現(xiàn)多個文件上傳，并提供一些實例來加深理解。

在我們開始之前，讓我們先總結(jié)一下本文的結(jié)論。Ajax提交多個文件上傳可以通過FormData對象和XMLHttpRequest對象來實現(xiàn)。我們可以通過FormData對象將文件添加到一個表單中，然后將FormData對象傳遞給XMLHttpRequest對象進行提交，并使用相關的事件來監(jiān)控上傳進度和處理上傳結(jié)果。這樣，我們就可以實現(xiàn)方便快捷的多個文件上傳操作。

下面，讓我們看一些具體的示例來理解如何使用Ajax提交多個文件上傳。

示例一：單個文件上傳。

var fileInput = document.getElementById('file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);

在上面的示例中，我們首先獲取到一個文件輸入框的引用，然后通過files屬性來獲取用戶選擇的文件。接著，我們創(chuàng)建一個FormData對象，并使用append()方法將文件添加到FormData對象中。接下來，我們創(chuàng)建一個XMLHttpRequest對象，設置請求的方式、URL和是否使用異步方式，并為onreadystatechange事件綁定一個處理函數(shù)。最后，我們調(diào)用send()方法將FormData對象發(fā)送到服務器。

示例二：多個文件上傳。

var fileInputs = document.getElementsByClassName('file');
var formData = new FormData();
for (var i = 0; i < fileInputs.length; i++) {
var file = fileInputs[i].files[0];
formData.append('files[]', file);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);

在上面的示例中，我們通過getElementsByClassName()方法獲取到所有文件輸入框的引用，并使用一個循環(huán)來遍歷這些引用。在循環(huán)中，我們獲取每個文件輸入框的files[0]屬性來獲取用戶選擇的文件，并使用append()方法將文件添加到FormData對象中。最后，我們創(chuàng)建一個XMLHttpRequest對象，設置請求的方式、URL和是否使用異步方式，并為onreadystatechange事件綁定一個處理函數(shù)。最后，我們調(diào)用send()方法將FormData對象發(fā)送到服務器。

通過以上兩個示例，我們可以看到如何使用Ajax提交多個文件上傳。這種方式不僅可以方便地上傳多個文件，而且還可以提供良好的用戶體驗。希望本文能幫助到你，在實際項目中更加靈活地使用Ajax進行多個文件上傳。