本文將介紹如何使用Ajax上傳圖片并實現回顯功能。Ajax是一種在不刷新整個頁面的情況下與服務器進行交互的技術，通過在后臺發送HTTP請求，可以實現異步上傳圖片的功能。在本文中，我們將以一個商品圖片上傳的例子來說明如何使用Ajax上傳圖片并實現回顯。

首先，我們需要一個用于上傳圖片的HTML表單。假設我們有一個商品編輯頁面，其中包含一個input元素用于上傳圖片，以及一個用于顯示回顯圖片的img元素。代碼如下：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="uploadImage" />
</form>
<img id="preview" src="" alt="Preview Image" />

在JavaScript中，我們可以使用XMLHttpRequest對象來發送Ajax請求。當用戶選擇了一張圖片后，我們可以通過監聽input元素的change事件來觸發一個上傳圖片的函數。在這個函數中，我們可以使用FormData對象來構建表單數據，將圖片作為一個文件上傳。代碼如下：

document.getElementById('uploadImage').addEventListener('change', function() {
var file = this.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 === XMLHttpRequest.DONE && xhr.status === 200) {
var imageURL = xhr.responseText;
document.getElementById('preview').src = imageURL;
}
};
xhr.send(formData);
});

在上述代碼中，我們首先獲取了用戶選擇的圖片文件。然后，我們創建了一個FormData對象，并將圖片文件作為一個鍵值對加入到FormData對象中。接下來，我們創建了一個XMLHttpRequest對象，并使用open方法來指定請求的方法、URL和是否異步。在發送請求之后，我們通過監聽readyState的變化來判斷請求的狀態。當請求狀態為XMLHttpRequest.DONE（即請求完成）并且狀態碼為200時，我們可以獲取到服務器返回的圖片URL，并將其賦值給img元素的src屬性，從而實現回顯圖片的功能。

假設我們的后臺服務器使用Node.js和Express框架。在Node.js中，我們可以使用multer中間件來處理上傳的文件，并將其保存到服務器上。代碼如下：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), (req, res) =>{
const file = req.file;
const imageURL = `/uploads/${file.filename}`;
res.send(imageURL);
});
app.listen(3000, () =>{
console.log('Server is running on port 3000');
});

在上述代碼中，我們首先導入了express模塊和multer中間件。然后，我們創建了一個Express應用，并使用multer中間件來指定文件的存儲路徑。在post請求的處理函數中，我們可以通過req.file屬性來獲取上傳的文件，并根據文件名構造圖片URL。最后，我們通過res.send方法將圖片URL作為響應發送給前端。

通過以上步驟，我們成功地實現了使用Ajax上傳圖片并實現回顯的功能。當用戶選擇了一張圖片后，我們通過Ajax請求將其上傳到服務器，并在服務器返回圖片URL后，將其賦值給img元素的src屬性，從而實現了圖片的回顯。