AJAX 多文件上傳是一種常見的網頁開發技術，它可以實現同時上傳多個文件，并通過進度條實時顯示每個文件的上傳進度。這種技術在現代網頁應用中廣泛應用，用于提高用戶體驗和增強交互效果。本文將介紹如何使用 AJAX 多文件上傳，并結合具體例子演示其工作原理。

在 AJAX 多文件上傳中，我們需要使用 HTML5 的 File API 獲取用戶選擇的文件，并通過 AJAX 發送到服務器端進行處理。下面是一個典型的 AJAX 多文件上傳的示例代碼：

<input type="file" id="file-input" multiple="multiple">
<button onclick="uploadFiles()">上傳文件</button>
<script>
function uploadFiles() {
var input = document.getElementById('file-input');
var files = input.files;
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log('上傳進度：' + percent + '%');
});
xhr.open('POST', '/upload', true);
xhr.send(files);
}
</script>

上述代碼包含一個文件選擇框和一個“上傳文件”按鈕。當用戶選擇文件后，點擊按鈕將觸發 uploadFiles() 函數。在該函數中，我們首先獲取用戶選擇的文件，然后創建一個 XMLHttpRequest 對象，并使用其 upload 事件監聽器來實時監測上傳進度。

在事件監聽器中，我們通過計算已上傳的字節數和總字節數的比例來獲取上傳進度的百分比，并將其打印到控制臺中。當文件上傳完成后，服務器將對這些文件進行處理。在上面的代碼中，我們通過調用xhr.open() 方法來設置 HTTP 請求方法和服務器端處理的 URL，然后調用 xhr.send() 方法將文件發送到服務器。

為了更好地理解 AJAX 多文件上傳的原理和實現過程，我們可以通過一個具體的例子來演示。假設我們正在開發一個圖片分享網站，用戶可以選擇多個圖片文件進行上傳。我們使用上述的 AJAX 代碼來實現上傳功能，并在上傳過程中顯示文件的上傳進度。

當用戶選擇了幾個圖片文件后，點擊“上傳文件”按鈕，我們可以看到每個文件的上傳進度實時顯示在控制臺中。通過該進度條，用戶可以清楚地看到每個文件的上傳狀態，從而更好地了解上傳過程。

總結來說，AJAX 多文件上傳是一種常用的網頁開發技術，它可以通過實時顯示進度條來提高用戶體驗。在這篇文章中，我們介紹了如何使用 AJAX 實現多文件上傳，并通過具體的例子演示了它的工作原理。希望這篇文章能夠幫助讀者更好地理解和應用 AJAX 多文件上傳技術。