Ajax是一種在Web開發中廣泛應用的技術，可以實現在不刷新整個頁面的情況下，與服務器進行異步數據交互和更新頁面內容。在圖片上傳這個場景中，Ajax可以實現多個圖片同時上傳到服務器，并且實時展示上傳進度，從而給用戶提供更好的用戶體驗。本文將重點介紹如何使用Ajax實現多個圖片上傳，并詳細介紹相關的代碼和操作步驟。

首先，我們需要在HTML頁面中創建一個用于選擇圖片的表單，如下所示：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="images" multiple>
<input type="button" value="上傳" onclick="uploadImages()">
</form>

上述代碼中，我們使用了input標簽的file類型，通過設置multiple屬性可以允許用戶選擇多個圖片。當用戶點擊上傳按鈕時，會調用JavaScript函數uploadImages()。

接下來，我們使用JavaScript代碼來實現圖片上傳的功能：

function uploadImages() {
var form = document.getElementById("uploadForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log(percent + "%");
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}

上述代碼中，我們首先獲取了表單元素和其中的圖片數據，然后創建了一個XMLHttpRequest對象。通過調用open方法，我們將請求發送到服務器的upload.php文件，同時設置了異步請求為true。接著，我們通過xhr.upload.onprogress事件監聽上傳進度，在這個事件中可以獲取到當前上傳的百分比，并將其打印到控制臺。最后，我們通過xhr.onreadystatechange事件監聽請求的狀態，并在狀態碼為4（請求已完成）和狀態為200（請求成功）時，打印出服務器返回的響應。

在服務器端，我們需要編寫upload.php文件來處理上傳的圖片，同時存儲到指定的目錄中：

<?php
$targetDir = "uploads/";
$uploadedFiles = $_FILES['images'];
foreach ($uploadedFiles['tmp_name'] as $key =>$tmp_name) {
$targetFile = $targetDir . basename($uploadedFiles['name'][$key]);
move_uploaded_file($tmp_name, $targetFile);
}
echo "上傳成功！";
?>

上述代碼中，我們首先設置了目標存儲目錄為uploads/，然后遍歷用戶上傳的圖片數據。使用move_uploaded_file函數可以將文件從臨時目錄移動到我們指定的目錄。最后，我們通過echo語句回傳給客戶端一個上傳成功的信息。

通過以上的代碼和操作步驟，我們成功實現了使用Ajax進行多個圖片上傳的功能。當用戶選擇多個圖片后，點擊上傳按鈕，即可將圖片異步上傳到服務器，并且實時展示上傳進度。這種方式不僅提升了用戶體驗，還節省了頁面加載時間，對于大規模的圖片上傳場景尤為適用。