AJAX（Asynchronous JavaScript And XML）是一種在Web應用程序中實現異步數據交互的技術。它通過在后臺與服務器進行少量數據交換，而無需刷新整個頁面來實現動態更新用戶界面的目的。

在Web開發中，圖片上傳并展示是一個常見的需求。使用AJAX技術可以實現圖片的異步上傳和展示，提升用戶體驗。本文將介紹如何使用AJAX來實現圖片上傳并展示的功能。

首先，我們需要一個HTML表單，用戶可以通過該表單選擇要上傳的圖片。以下是一個簡單的表單示例：

<form id="uploadForm" method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="image" id="image"/>
<input type="button" value="上傳" onclick="uploadImage()"/>
</form>

上面的表單中，我們指定了一個id為“uploadForm”的form元素，并設置了“enctype”屬性為“multipart/form-data”，這是在處理文件上傳時必需的。我們還為input元素設置了一個id為“image”，以便在JavaScript中方便地獲取到用戶選擇的圖片文件。

接下來，我們需要編寫一個JavaScript函數，來處理圖片上傳的邏輯。以下是一個使用jQuery庫實現的簡單示例：

function uploadImage() {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(response) {
// 上傳成功后的邏輯處理
// 在這里可以將上傳成功的圖片展示給用戶
},
error: function() {
// 上傳失敗后的邏輯處理
}
});
}

上述代碼中，我們首先通過FormData對象獲取了表單中的數據。然后，使用$.ajax函數發送了一個POST請求到“upload.php”文件，請求中的數據為formData。注意，我們將“contentType”和“processData”參數都設置為false，這樣才能正確處理文件。請求成功后，可以在“success”回調函數中對上傳成功的圖片進行展示操作，而在“error”回調函數中可以處理上傳失敗的情況。

最后，我們還需要在服務器端編寫一個處理圖片上傳的腳本。這里以PHP為例，以下是一個簡單的upload.php腳本示例：

<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["image"]["name"]);
if (move_uploaded_file($_FILES["image"]["tmp_name"], $targetFile)) {
// 圖片上傳成功
// 可以根據需要進行進一步的處理，比如生成縮略圖等操作
echo "圖片上傳成功！";
} else {
// 圖片上傳失敗
echo "圖片上傳失敗！";
}
?>

在上述PHP腳本中，我們首先指定了一個目標目錄“uploads/”，用于存儲上傳的圖片。然后，使用move_uploaded_file函數將臨時文件移動到目標目錄中，以完成圖片的上傳操作。如果移動成功，則可以根據需要進行進一步的處理，比如生成縮略圖等操作；如果移動失敗，則返回一個相應的錯誤信息。

通過以上的步驟，我們就可以實現一個簡單的AJAX圖片上傳并展示的功能。通過AJAX技術，在用戶上傳圖片時無需刷新整個頁面，可以使上傳的過程更加流暢，提升用戶體驗。