利用Ajax异步上传的代码

以下是使用Ajax异步上传实现文件上传的示例代码：

HTML代码：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

JavaScript代码：

// 获取表单元素和文件输入框
var form = document.getElementById('uploadForm');
var fileInput = form.querySelector('input[type="file"]');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  // 阻止表单默认提交事件
  event.preventDefault();

  // 创建FormData对象，将文件内容打包
  var formData = new FormData();
  formData.append('file', fileInput.files[0]);

  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 监听上传进度事件
  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      // 计算上传进度百分比
      var percent = Math.round((event.loaded / event.total) * 100);
      console.log('上传进度：' + percent + '%');
    }
  });

  // 监听上传完成事件
  xhr.addEventListener('load', function(event) {
    console.log('上传完成');
  });

  // 监听上传错误事件
  xhr.addEventListener('error', function(event) {
    console.log('上传出错');
  });

  // 发送Ajax请求，上传文件
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
});

在上面的示例代码中，我们首先获取表单元素和文件输入框，然后监听表单提交事件，在事件处理函数中创建FormData对象，将文件内容打包后发送到服务器端。在创建XMLHttpRequest对象后，我们还监听了上传进度、上传完成和上传错误等事件，以便及时获取上传状态。最后，我们打开POST请求并发送FormData对象，实现了文件的异步上传。