使用ajax完成图片上传

使用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环境。如果你使用其他后端语言，处理上传文件的逻辑可能会有所不同，但基本的思路是相同的。