2. 通过AJAX上传单个图片

我们首先来学习如何使用AJAX上传单个图片。下面是一个示例的代码：

function uploadImage() {
var file = document.getElementById("image").files[0];
var formData = new FormData();
formData.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上传成功后的处理代码
}
};
xhr.send(formData);
}

上述代码中，我们通过getElementById方法获取了用户选择的图片文件，然后创建了一个FormData对象，并将图片文件添加到该对象中。接着，我们使用XMLHttpRequest对象来发送一个异步的POST请求，将FormData对象发送到后端服务器。在服务器端处理该请求后，可以实现图片的上传。

3. 使用AJAX上传多张图片

下面是一个示例的代码，演示如何使用AJAX上传多张图片：

function uploadImages() {
var files = document.getElementById("images").files;
var formData = new FormData();
for (var i = 0; i< files.length; i++) {
formData.append("images[]", files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上传成功后的处理代码
}
};
xhr.send(formData);
}

上述代码中，我们通过getElementById方法获取了用户选择的多个图片文件，并使用循环将这些图片文件逐个添加到FormData对象中。然后，我们通过XMLHttpRequest对象发送一个异步的POST请求，将FormData对象发送到后端服务器。服务器端可以解析FormData对象，获取到所有的图片文件，并进行相应的处理。

4. 使用AJAX上传多张图片的优势

通过使用AJAX上传多张图片，可以提供更好的用户体验和性能优化。用户可以在上传过程中进行其他操作，而不需要等待整个页面的刷新。同时，使用AJAX上传多张图片可以减少不必要的网络传输，提高上传效率。

总之，通过以上代码示例，我们可以看到使用AJAX上传多张图片是一种高效、灵活和用户友好的方式。它可以提供良好的用户体验，并能够优化网站或应用程序的性能。我们应该在实际的开发中积极尝试和应用这种技术。