ajax 上传文件 json

AJAX（Asynchronous JavaScript and XML）技术的应用已经越来越广泛。在文件上传方面，AJAX可以使上传更加有效、快速，并且基于JSON格式的数据传输可以让我们更好地处理上传信息。

AJAX上传文件的实现代码如下：

function uploadFile(file) {
  var xhr = new XMLHttpRequest();
  var formData = new FormData();
  formData.append('file',file,file.name);
  
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
      } else {
        console.error('上传失败');
      }
    }
  }
  
  xhr.open('POST','/upload',true);
  xhr.send(formData);
}

代码中首先创建了一个XMLHttpRequest实例，FormData对象用于创建一个包含上传文件的表单。XHR对象的onreadystatechange事件在每次读取响应时会被调用，此时需要检查上传是否成功，并处理响应信息。

使用JSON格式处理上传信息的代码如下：

app.post('/upload',function (req,res) {
  var file = req.files.file;
  var response = {
    fileName: file.name,fileSize: file.size
  }
  res.setHeader('Content-Type','application/json');
  res.send(JSON.stringify(response));
});

代码中使用Express框架来处理上传文件的POST请求。获取上传的文件信息后，将文件名和文件大小封装在一个响应体中，这个响应体是一个JSON字符串。在响应头中设置Content-Type为application/json，以告诉浏览器我们返回的是一个JSON格式的数据。

通过AJAX上传文件并使用JSON格式返回上传信息，我们可以更灵活地处理上传操作。同时，这种方式也能够在上传大型文件时提供更好的用户体验。