AJAX是一種前端技術，可用于在不刷新整個頁面的情況下向服務器發送請求并接收響應。在實際應用中，我們經常需要實現多圖上傳的功能。本文將介紹如何使用Ajax和Java開發多圖上傳功能，并為讀者提供相關的源代碼下載。

多圖上傳是指用戶可以選擇并同時上傳多張圖片到服務器。使用Ajax可以增強用戶體驗，因為它可以在上傳過程中顯示進度，并提供實時的反饋信息。同時，我們也可以通過Ajax來驗證上傳的圖片類型、大小等信息，增加系統的可靠性。

服務器端代碼

import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import org.json.*;
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
// 獲取上傳的文件列表
List<Part> fileParts = request.getParts().stream().filter(part ->"file".equals(part.getName())).collect(Collectors.toList());
// 處理每個上傳的文件
JSONArray files = new JSONArray();
for (Part filePart : fileParts) {
String fileName = getFileName(filePart);
// 保存文件
String filePath = saveFile(filePart, fileName);
// 將文件信息添加到JSON數組
JSONObject fileInfo = new JSONObject();
fileInfo.put("name", fileName);
fileInfo.put("path", filePath);
files.put(fileInfo);
}
out.print(files.toString());
out.flush();
}
private String getFileName(Part part) {
String contentDisp = part.getHeader("content-disposition");
String[] tokens = contentDisp.split(";");
for (String token : tokens) {
if (token.trim().startsWith("filename")) {
return token.substring(token.indexOf('=') + 1).trim().replace("\"", "");
}
}
return "";
}
private String saveFile(Part part, String fileName) throws IOException {
String path = "uploads/" + fileName;
InputStream inputStream = part.getInputStream();
byte[] buffer = new byte[8192];
int bytesRead;
try (OutputStream outputStream = new FileOutputStream(path)) {
while ((bytesRead = inputStream.read(buffer, 0, 8192)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
}
return path;
}
}

AJAX代碼

function uploadFiles() {
var files = document.getElementById("fileInput").files;
var formData = new FormData();
for (var i = 0; i< files.length; i++) {
formData.append("file", files[i]);
}
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 fileInfo = response[i];
console.log("上傳成功：" + fileInfo.name + "，路徑：" + fileInfo.path);
}
}
};
xhr.send(formData);
}

在上述代碼中，我們通過獲取元素的files屬性獲取用戶選擇的文件列表。然后，我們創建一個FormData對象，將每個文件添加到FormData中的file字段中。接下來，我們創建一個XMLHttpRequest對象，并發送該FormData到服務器的/upload路徑。在服務器端，我們使用Apache Commons FileUpload來處理上傳的文件，將文件保存到服務器的指定路徑，并將文件信息以JSON格式返回給客戶端。客戶端收到響應后，可以根據需要對文件信息進行處理。

通過使用Ajax和Java開發，我們可以實現一個強大的多圖上傳功能。用戶可以方便地選擇并上傳多張圖片，而不需要刷新整個頁面。同時，我們也可以在上傳過程中實時顯示進度，并提供實時反饋信息。這使得用戶體驗更加友好，并提高了系統的可靠性。我相信，通過閱讀本文并下載源代碼，讀者能夠更好地理解并應用Ajax多圖上傳功能。