使用AJAX完成图片上传主要涉及到前端构建表单数据并发送请求，以及后端接收和处理这些数据。以下是一个简单的实现示例：
前端HTML和JavaScript代码：
<form id="uploadForm">
<input type="file" name="image" id="image" />
<input type="button" value="上传" onclick="uploadImage()" />
</form>
<script>
function uploadImage() {
var formData = new FormData();
var imageFile = document.getElementById('image').files[0];
formData.append('image', imageFile);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (this.status == 200) {
console.log('图片上传成功');
}
};
xhr.send(formData);
}
</script>后端Node.js (Express) 示例代码：
const express = require('express');
const multer = require('multer');
const app = express();
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
const upload = multer({ storage: storage })
app.post('/upload', upload.single('image'), (req, res) => {
const file = req.file;
if (!file) {
return res.status(400).send('No file uploaded.');
}
console.log(file);
res.send('File uploaded successfully.');
});
const port = 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});在这个例子中，前端使用了FormData来构建表单数据，并通过AJAX请求发送到后端。后端使用了multer中间件来处理上传的文件。这个例子假设你已经有Node.js和Express环境。如果你使用其他后端语言，处理上传文件的逻辑可能会有所不同，但基本的思路是相同的。