AJAX是一種用于創建交互式Web應用程序的技術，它可以使我們在不刷新整個頁面的情況下與服務器進行數據交互。而圖片上傳是Web應用程序中常見的功能之一。本文將介紹如何使用AJAX在Java中實現圖片上傳預覽功能。

在傳統的圖片上傳流程中，用戶選擇一張圖片并點擊提交按鈕后，表單將被提交到服務器，服務器接收到表單后將圖片保存到指定的目錄中。這種方式需要刷新整個頁面，用戶體驗不佳。而使用AJAX技術，我們可以在用戶選擇圖片后，即時地將圖片顯示在頁面上，提高用戶體驗。

接下來，我們將使用Java的Spring框架為例，演示如何使用AJAX技術實現圖片上傳預覽功能。

首先，我們需要創建一個HTML頁面，其中包含一個文件輸入框和一個用于顯示圖片的元素。當用戶選擇一張圖片時，我們可以通過JavaScript代碼獲取到該圖片，并在頁面上進行預覽。

<input type="file" id="uploadInput" onchange="previewImage()"/>
<img src="#" alt="Preview" id="previewImage" style="display: none;"/>
<script>
function previewImage() {
var input = document.getElementById("uploadInput");
var preview = document.getElementById("previewImage");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = "block";
}
reader.readAsDataURL(input.files[0]);
}
}
</script>

以上的代碼通過監聽文件輸入框的onchange事件，在用戶選擇了一張圖片后，使用FileReader對象讀取圖片內容，并將圖片的Base64編碼格式賦值給預覽圖像的src屬性。這樣，圖片就會在頁面上立即顯示出來。

在Java后端，我們需要編寫一個Controller來接收Ajax請求，并將上傳的圖片保存到磁盤上的指定目錄中。下面是一個簡單的Controller示例：

@RestController
@RequestMapping("/upload")
public class ImageUploadController {
@PostMapping("/image")
public ResponseEntity<String> uploadImage(@RequestParam("image") MultipartFile file) {
try {
// 保存文件到指定目錄
String fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(file.getOriginalFilename());
String filePath = "/path/to/upload/directory/" + fileName;
file.transferTo(new File(filePath));
return ResponseEntity.ok("Image uploaded successfully");
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload image");
}
}
}

上述代碼中，我們使用Spring的MultipartFile類來處理文件上傳請求，將接收到的圖片文件保存到指定目錄中。這里的目錄路徑可以根據實際情況進行修改。

最后，在前端頁面中，我們需要編寫AJAX請求將圖片上傳到后端。下面是一個使用jQuery的AJAX請求的示例：

$("#uploadInput").change(function() {
var formData = new FormData();
formData.append('image', $(this).prop("files")[0]);
$.ajax({
url: "/upload/image",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 上傳成功后的處理
console.log(response);
},
error: function(xhr, status, error) {
// 上傳失敗后的處理
console.error(error);
}
});
});

以上代碼中，我們使用了jQuery的ajax函數發送POST請求，將圖片文件作為FormData的一部分發送到后端。需要注意的是，由于涉及文件上傳，我們需要將processData和contentType兩個選項設置為false，以便正確處理文件內容類型。

綜上所述，使用AJAX技術可以實現圖片上傳預覽功能。用戶在選擇圖片后，前端即時地將圖片顯示在頁面上，而后端通過接收AJAX請求，將上傳的圖片保存到指定目錄中。這種方式能提高用戶體驗，并減少頁面刷新的次數。