Ajax是一種在Web開發中廣泛使用的技術，它能夠實現在不刷新整個頁面的情況下與服務器進行數據交互。在文件上傳的場景中，使用Ajax可以實現同時上傳多個文件的功能，提升用戶體驗的同時也提高了系統的效率。本文將介紹使用Ajax實現多個文件上傳的方法，并通過實例進行詳細講解。

在Web開發中，多個文件上傳是一個常見的需求。傳統的文件上傳方式是通過表單的元素實現的，用戶每次只能選擇一個文件進行上傳。如果要上傳多個文件，用戶需要多次選擇文件并提交表單。這種方式不僅繁瑣，還會導致多次的頁面刷新，影響用戶體驗。

使用Ajax可以實現在不刷新整個頁面的情況下上傳多個文件。下面我們將通過一個示例來說明如何實現這個功能：

// HTML代碼
<form id="fileUploadForm">
<input type="file" name="files[]" multiple>
<input type="button" value="上傳" onclick="uploadFiles()">
</form>
<div id="progressContainer"></div>
// JavaScript代碼
function uploadFiles() {
var form = document.getElementById("fileUploadForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.onprogress = function(event) {
var progress = event.loaded / event.total * 100;
document.getElementById("progressContainer").innerHTML = "上傳進度：" + progress.toFixed(2) + "%";
};
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
document.getElementById("progressContainer").innerHTML = "上傳完成！";
}
};
xhr.send(formData);
}

在上面的示例中，HTML部分包含一個表單元素和一個用于顯示上傳進度的容器。表單中的元素設置了multiple屬性，表示可以選擇多個文件進行上傳。點擊“上傳”按鈕時，調用了名為uploadFiles的JavaScript函數。

在JavaScript函數中，首先獲取表單元素并創建一個FormData對象，該對象用于將表單數據序列化發送到服務器。接下來，創建一個XMLHttpRequest對象，并指定請求的類型、URL和是否異步。通過設置xhr.upload.onprogress屬性，我們可以在上傳過程中實時更新上傳進度到頁面中。xhr.onreadystatechange函數用于監聽請求的狀態變化，并在上傳完成時更新頁面內容。

在后端，我們可以使用PHP等服務器端語言來處理接收到的文件。具體的處理邏輯可以根據實際需求進行設計，例如保存文件、生成縮略圖等。

Ajax實現多個文件上傳的優勢不僅在于改善了用戶體驗，還可以提高系統的效率。在傳統的文件上傳方式中，每次提交表單時都需要刷新整個頁面，而使用Ajax可以在不刷新整個頁面的情況下進行文件上傳，減少了不必要的頁面刷新，節約了帶寬和服務器資源。

總之，使用Ajax可以很方便地實現上傳多個文件的功能，提升用戶體驗的同時也提高了系統的效率。通過上面的示例，我們可以清晰地了解到Ajax在多個文件上傳場景中的應用，希望對大家學習和應用Ajax技術有所幫助。