AJAX（Asynchronous JavaScript and XML）是一種在網頁中，通過使用 JavaScript 和 XML 進行數據交互的技術。它的特點是能夠在不刷新整個頁面的情況下，通過異步方式向服務器發送請求并接收響應。本文將介紹如何使用 AJAX 來實現多張圖片保存到數據庫的功能。

想象一下，我們正在開發一個圖片分享網站，用戶可以上傳多張圖片并保存到數據庫中。為了提升用戶體驗，我們希望實現無刷新上傳圖片的功能。通過 AJAX 技術，我們可以在用戶點擊“上傳”按鈕后，異步將圖片數據發送到服務器并保存到數據庫中，然后在客戶端顯示上傳成功的提示信息。

下面是一個示例的 HTML 代碼，用于用戶上傳圖片：

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

在上述代碼中，我們使用了 HTML5 中的元素，允許用戶選擇多張圖片。在用戶點擊上傳按鈕后，將執行名為 uploadImages 的 JavaScript 函數。

下面是 uploadImages 函數的示例代碼：

function uploadImages() {
var formData = new FormData();
var files = document.getElementById("fileInput").files;
for(var i=0; i<files.length; i++) {
formData.append("images[]", files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("上傳成功！");
}
};
xhr.send(formData);
}

在 uploadImages 函數中，我們首先創建了一個 FormData 對象，用于存儲待上傳的圖片數據。然后，通過獲取文件輸入框的文件列表，將每個文件添加到 FormData 對象中。接下來，我們使用 XMLHttpRequest 對象創建了一個 AJAX 請求，將 FormData 對象發送到服務器的 upload.php 文件。在服務器端，我們可以使用 PHP 或其他后端語言來處理接收到的圖片數據，并將其保存到數據庫中。

在服務器端，我們可以使用類似以下的 PHP 代碼來處理保存圖片到數據庫的功能：

$pdo = new PDO("mysql:host=localhost;dbname=gallery", "username", "password");
$stmt = $pdo->prepare("INSERT INTO images (filename) VALUES (?)");
foreach ($_FILES["images"]["tmp_name"] as $tmp_name) {
$filename = basename($tmp_name);
move_uploaded_file($tmp_name, "uploads/" . $filename);
$stmt->execute([$filename]);
}

上述代碼中，我們首先創建了一個 PDO 對象，用于連接到數據庫。然后，我們使用預處理語句來執行插入操作，將圖片的文件名保存到數據庫的 images 表中。在 foreach 循環中，我們遍歷了接收到的每個臨時文件，并將其移動到服務器上的 uploads 目錄下。最后，通過 execute 方法將圖片文件名插入到數據庫中。

通過上述示例，我們可以使用 AJAX 技術實現多張圖片保存到數據庫的功能。當用戶在網頁中選擇并上傳多張圖片時，這些圖片將被異步發送到服務器，并保存到數據庫中。通過這種方式，我們可以實現無刷新上傳圖片的功能，提升用戶體驗。