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 技术实现多张图片保存到数据库的功能。当用户在网页中选择并上传多张图片时，这些图片将被异步发送到服务器，并保存到数据库中。通过这种方式，我们可以实现无刷新上传图片的功能，提升用户体验。