AJAX (Asynchronous JavaScript and XML) 是一種前端技術，用于在不刷新整個頁面的情況下向服務器發送請求，并且能夠異步獲取和更新數據。在文件上傳的場景中，特別是當需要同時上傳多個文件時，可以使用 AJAX 來實現多文件的同時上傳以及顯示對應的進度條。這種技術可以提升用戶體驗，使用戶可以清楚地了解每個文件的上傳進度，同時提供了更大的靈活性。

假設我們有一個網站，用戶可以通過一個上傳表單來上傳多個文件。每個文件上傳都需要一定時間，如果沒有進度條，用戶可能會因為不知道上傳進度而產生不便和不確定的感覺。通過使用 AJAX 多文件多進度條的技術，我們可以為每一個上傳的文件顯示一個獨立的進度條，讓用戶能夠及時了解每個文件的上傳進度。

為了實現這個功能，首先要使用HTML和JavaScript創建一個上傳表單。用戶將選擇多個文件，然后點擊"上傳"按鈕，表單將通過 AJAX 發送給后端服務器。下面是一個簡單的示例：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="files[]" multiple />
<input type="submit" value="上傳" />
</form>

在 JavaScript 中，我們可以使用 FormData 對象來處理表單數據。使用 jQuery 的 AJAX 函數可以非常方便地發送表單數據給服務器，并獲得服務器響應。以下是一個示例：

$("#uploadForm").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
dataType: 'json',
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// 更新對應文件的進度條
// ...
}
}, false);
return xhr;
},
success: function(response) {
// 文件上傳完成
// ...
}
});
});

在上面的代碼中，我們通過 xhr 對象的 upload 事件來實時監聽上傳進度。根據進度返回的數據，我們可以更新對應文件的進度條。可以使用 Bootstrap 或其他 CSS 框架來美化進度條的樣式。當文件上傳完成后，服務器將返回相應的響應，我們可以在 success 回調函數中進行處理。

總結來說，通過 AJAX 多文件多進度條的技術，我們可以有效地提升用戶體驗，實時顯示每個文件的上傳進度，使用戶了解上傳的狀態，提高用戶的滿意度。不僅如此，這種技術也為開發人員提供了更大的靈活性，可以自主設計和調整進度條的樣式和形式，以滿足不同需求的網站。