在現代Web應用中，經常需要實現文件上傳的功能。而當需要上傳多個文件時，傳統的表單提交方式顯得非常繁瑣和耗時。利用Ajax和FormData對象，我們可以方便地實現多文件的異步上傳，提升用戶體驗。本文將介紹如何使用Ajax上傳FormData對象的多個文件，并給出代碼示例。

要實現多文件的上傳，我們首先需要創建一個包含多個文件輸入框的表單。例如，我們可以創建一個簡單的HTML表單來上傳頭像和相冊照片：

<form id="upload-form" enctype="multipart/form-data">
<input type="file" name="avatar" multiple />
<input type="file" name="photos[]" multiple />
<button type="submit">上傳</button>
</form>

在這個表單中，我們定義了兩個文件輸入框：<input type="file" name="avatar" multiple />和<input type="file" name="photos[]" multiple />。其中，name屬性分別指定了文件字段的名稱為avatar和photos，multiple屬性表示允許選擇多個文件。

接下來，我們需要編寫JavaScript代碼來處理表單的提交和文件上傳。首先，我們通過事件監聽器來捕獲表單的提交事件：

document.getElementById('upload-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var formData = new FormData(this); // 創建一個FormData對象
uploadFiles(formData); // 調用上傳文件的函數
});

在表單的提交事件處理函數中，我們首先調用event.preventDefault()方法來阻止表單的默認提交行為。接著，我們創建一個FormData對象，將整個表單作為參數傳遞進去。這樣，FormData對象將會自動收集表單中的所有數據。

然后，我們需要定義一個上傳文件的函數uploadFiles()。在這個函數中，我們使用XMLHttpRequest對象來發送FormData對象，并以異步方式上傳文件：

function uploadFiles(formData) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true); // 配置XMLHttpRequest對象
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('文件上傳成功');
}
};
xhr.send(formData); // 發送FormData對象
}

在這段代碼中，我們首先創建了一個XMLHttpRequest對象xhr，然后使用open()方法來配置xhr對象。其中，第一個參數指定了請求的方法、URL和是否采用異步方式，這里我們使用POST方法、URL為upload.php，并采用異步方式。接著，我們使用onreadystatechange事件來監聽xhr對象的狀態。當狀態為4（即請求已完成）且狀態碼為200（即請求成功）時，表示文件上傳成功，我們可以在控制臺輸出一條成功的提示信息。

最后，我們調用send()方法來將FormData對象發送到服務器。這樣，多個文件就會被同時上傳到服務器上。

綜上所述，使用Ajax上傳FormData對象的多個文件可以大大簡化文件上傳的操作。通過利用事件監聽器和XMLHttpRequest對象，我們可以方便地實現多文件的異步上傳。而且，由于是異步上傳，用戶不必等待文件上傳完成就可以繼續進行其他操作，提升了用戶體驗。