在現代網頁開發中，經常會遇到需要上傳多個文件的需求。使用傳統的表單提交方式來處理多個文件上傳通常會導致頁面刷新，影響用戶體驗。而使用AJAX技術可以實現在不刷新頁面的情況下完成多個文件的上傳。本文將介紹如何使用AJAX來實現多個文件的上傳，并結合示例進行說明。 AJAX技術是一種在不刷新整個頁面的情況下，通過后臺和前臺之間的異步交互技術。利用AJAX技術，我們可以在不刷新頁面的情況下向服務器發送請求、接收和處理響應。在多文件上傳的場景中，我們可以通過AJAX來實現文件的異步上傳和進度顯示。 下面我們來看一個具體的示例，假設我們需要上傳多張圖片。首先，我們需要一個包含文件選擇框和上傳按鈕的HTML表單，讓用戶選擇要上傳的圖片文件。 ```html

``` 然后，我們需要編寫一個JavaScript函數來處理表單的提交，并使用AJAX技術來上傳文件。 ```javascript // 獲取表單元素 var form = document.getElementById("uploadForm"); // 監聽表單的提交事件 form.addEventListener("submit", function(event) { event.preventDefault(); // 阻止表單默認的提交行為 // 創建FormData對象 var formData = new FormData(form); // 創建XMLHttpRequest對象 var xhr = new XMLHttpRequest(); // 監聽上傳進度 xhr.upload.addEventListener("progress", function(event) { if (event.lengthComputable) { var percent = (event.loaded / event.total) * 100; console.log("上傳進度：" + percent + "%"); } }); // 監聽上傳完成事件 xhr.addEventListener("load", function(event) { console.log("上傳完成"); }); // 發送AJAX請求 xhr.open("POST", "/upload", true); xhr.send(formData); }); ``` 在這段代碼中，我們首先獲取了包含文件選擇框和上傳按鈕的表單元素，然后監聽了表單的提交事件。在事件處理函數中，我們創建了一個FormData對象，將表單元素傳入其中。接著，我們創建了一個XMLHttpRequest對象，設置了上傳進度的監聽器和上傳完成的監聽器。最后，我們使用`open`方法打開一個POST請求，并發送了包含文件數據的FormData對象。 通過這種方式，我們可以在不刷新頁面的情況下，實現多個文件的異步上傳。上傳進度將在控制臺中顯示，并在上傳完成后進行通知。 在實際的開發過程中，我們還可以添加更多的功能來完善文件上傳的體驗。比如，在上傳過程中顯示一個進度條或者上傳完成后顯示一個成功提示。這些功能可以通過修改上述代碼和添加對應的HTML和CSS來實現。 綜上所述，使用AJAX技術可以方便地實現多個文件的上傳。通過上述示例，我們可以清楚地了解到如何使用AJAX技術來上傳多個文件，并且可以根據實際需求進行擴展和改進。在實際開發中，我們可以根據具體的需求，添加更多功能來優化用戶體驗。