Ajax是一種無需刷新頁面即可與服務器進行異步通信的技術。在圖片上傳的場景中，借助Ajax我們可以實現圖片的即時回顯。當用戶選擇一張圖片后，圖片將被上傳至服務器進行處理，然后通過Ajax將處理后的圖片回顯在頁面上。這種實現方式可以提升用戶體驗，讓用戶能夠立即看到上傳后的效果。

舉個例子來說明。假設我們有一個圖片上傳的功能模塊，用戶可以在頁面上點擊“上傳”按鈕，選擇本地的一張圖片。接下來，我們將通過Ajax來實現圖片的上傳和回顯。

首先，我們需要在頁面上創建一個可以選擇文件的元素：

<input type="file" id="fileInput" />

然后，在JavaScript中，我們需要監聽文件選擇事件，并獲取用戶選擇的文件：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect, false);
function handleFileSelect(event) {
const file = event.target.files[0];
// 在這里處理文件
}

當用戶選擇了一張圖片后，我們可以使用FormData對象來將圖片上傳至服務器：

function handleFileSelect(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
// 圖片上傳完成后的回調函數
};
xhr.send(formData);
}

在服務器端，我們可以使用任何喜歡的編程語言來處理上傳的圖片。處理完畢后，服務器可以返回圖片的URL給客戶端：

app.post('/upload', function(req, res) {
// 圖片處理邏輯
const processedImageUrl = 'http://example.com/processed_image.jpg';
res.send(processedImageUrl);
});

回到客戶端的JavaScript中，當上傳完成后，我們可以通過Ajax獲取服務器返回的圖片URL，并將其顯示在頁面上：

xhr.onload = function() {
const processedImageUrl = xhr.responseText;
const imageElement = document.createElement('img');
imageElement.src = processedImageUrl;
document.body.appendChild(imageElement);
};

以上就是使用Ajax實現圖片上傳回顯的完整流程。用戶選擇圖片后，圖片將通過Ajax上傳至服務器進行處理，并在處理完畢后通過Ajax將處理后的圖片URL回顯在頁面上。這種技術在許多網站中廣泛應用，在用戶上傳圖片的場景中可以極大地提升用戶體驗。