在網頁開發中，圖片上傳是一個常見的需求。而使用傳統的表單提交方式來上傳多張圖片會比較繁瑣，這時候可以考慮使用 AJAX 來實現多圖片上傳的功能。通過 AJAX 可以實現在不刷新整個頁面的情況下，將多張圖片上傳到服務器并顯示在頁面上。本文將介紹如何使用 AJAX 來實現多圖片上傳的功能，并通過舉例來進一步說明。

首先，我們需要在 HTML 頁面中創建一個用于選擇圖片的表單，并在表單中添加一個文件輸入框和一個上傳按鈕。通過點擊上傳按鈕，我們可以觸發 AJAX 請求將選中的圖片上傳到服務器。下面是一段 HTML 代碼示例：

<form id="upload-form" enctype="multipart/form-data">
<input type="file" name="images[]" multiple />
<button type="button" onclick="uploadImages()">上傳圖片</button>
</form>

在這段代碼中，我們使用了一個名為images[]的文件輸入框，并設置了multiple屬性，這樣用戶可以選擇并上傳多張圖片。同時，我們還添加了一個點擊事件onclick="uploadImages()"，該事件會調用 JavaScript 函數uploadImages()來處理圖片上傳的邏輯。

接下來，讓我們來編寫 JavaScript 函數uploadImages()。該函數通過 AJAX 請求將選中的圖片發送到服務器，并在上傳成功后將返回的圖片地址動態地顯示在頁面上。下面是一段 JavaScript 代碼示例：

function uploadImages() {
var form = document.getElementById("upload-form");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
for (var i = 0; i< response.length; i++) {
var img = document.createElement("img");
img.src = response[i].url;
document.body.appendChild(img);
}
}
};
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var progress = (event.loaded / event.total) * 100;
console.log("Upload progress: " + progress + "%");
}
};
xhr.send(formData);
}

在這段代碼中，我們首先獲取了表單元素和文件輸入框，然后使用FormData對象將選中的圖片打包成一個表單對象。接著，我們創建了一個 XMLHttpRequest 對象xhr，并設置了請求方式、URL 和監聽onreadystatechange事件。當請求狀態為 4（即請求已完成）并且響應狀態為 200（即響應成功）時，我們將服務端返回的圖片地址解析并創建圖片元素添加到頁面中。

另外，我們還通過xhr.upload.onprogress事件監聽上傳進度，并計算上傳的百分比。這樣用戶就可以實時看到圖片上傳的進度。

通過以上代碼，我們可以在選擇圖片后，點擊上傳按鈕將圖片上傳到服務器，并實時顯示上傳進度和上傳成功的圖片。這樣，我們就成功地實現了使用 AJAX 進行多圖片上傳的功能。

總結起來，使用 AJAX 來實現多圖片上傳是一種方便且高效的方法。它可以在不刷新頁面的情況下，將多張圖片上傳到服務器并顯示在頁面上。我們只需要在 HTML 頁面中創建一個用于選擇圖片的表單，并通過 JavaScript 函數處理圖片上傳的邏輯。通過以上示例，我們可以清楚地了解如何使用 AJAX 進行多圖片上傳，并在實踐中靈活應用。