本文将介绍如何使用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属性，从而实现了图片的回显。