ajax上传文件返回json

在Web开发中，文件上传与处理是一个不可避免的任务。通常，文件上传需要使用form表单提交，但是这种方式需要刷新整个页面，用户体验很不好。AJAX技术可以解决这个问题，使文件上传变得更加流畅，使用AJAX上传文件并且返回JSON数据，可以在不刷新页面的情况下上传文件并且响应更加灵活。

在实现AJAX上传文件并返回JSON数据，需要使用FormData对象，它可以将表单数据和文件一起提交。首先，我们需要将文件封装到FormData对象中，然后使用XMLHttpRequest对象将FormData对象传递给服务器。服务器处理完毕后，将结果封装到JSON中返回给客户端。

//HTML代码：
<form id="upload-form">
    <input type="file" name="file">
    <button type="submit" onclick="uploadFile(event)">上传</button>
</form>

//JavaScript代码：
function uploadFile(event) {
    event.preventDefault(); // 阻止表单默认提交
    
    var form = document.getElementById("upload-form");
    var formData = new FormData(form); // 将表单数据封装到FormData中
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST","/upload",true); // 发送POST请求到/upload接口
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText); // 将响应数据转换为JSON
            console.log(response);
        }
    }
    xhr.send(formData); // 发送FormData对象到服务器
}

//服务器代码：
app.post("/upload",upload.single("file"),function(req,res) {
    // 使用multer中间件处理上传的文件，文件会被储存在req.file中
    var file = req.file;
    var response = {
        filename: file.originalname,size: file.size
    }
    res.json(response); // 将响应数据以JSON格式返回给客户端
});

在服务器端代码中，我们使用了multer中间件来处理上传的文件。multer中间件可以处理多种类型的文件上传，非常方便。当上传文件成功后，我们将文件名和大小封装到JSON中并返回给客户端。

使用AJAX上传文件并返回JSON数据可以大大提升用户体验，但是需要注意的是，文件上传是需要服务器端进行处理的，服务器端需要做好文件上传和处理的机制。