XMLHttpRequestUpload 对象

一、基本概念

XMLHttpRequestUpload 对象表示一个 XMLHttpRequest 的上传进程。它是 XMLHttpRequest 的一个属性，可以用来监视上传的进度。

XMLHttpRequestUpload 对象有一些事件监听器，可以用来处理上传过程中的各种事件：

1. loadstart：当上传开始时触发。

2. progress：在上传过程中定期触发，可以用来更新上传进度条。

3. abort：当上传被用户取消时触发。

4. error：当上传过程中出现错误时触发。

5. load：当上传成功完成时触发。

6. timeout：当上传超时时触发。

7. loadend：当上传结束（无论成功或失败）时触发。

这些事件可以让你更好地控制和监视文件上传的过程。例如，你可以使用 progress 事件来显示一个上传进度条，或者使用 error 事件来处理上传过程中的错误。

二、实战示例

function uploadFile(file, url) {
  var xhr = new XMLHttpRequest();
  var formData = new FormData();

  formData.append('file', file); // 将文件添加到 FormData 对象中

  xhr.open('POST', url, true); // 打开连接

  // 监听上传进度
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = event.loaded / event.total * 100;
      console.log('上传进度：' + percentComplete + '%');
    }
  };

  // 监听上传完成
  xhr.upload.onload = function() {
    console.log('上传完成');
  };

  // 监听上传失败
  xhr.upload.onerror = function() {
    console.log('上传失败');
  };

  xhr.send(formData); // 发送请求
}

• 在这个示例中，我们首先创建了一个 XMLHttpRequest 对象和一个 FormData 对象。然后，我们将文件添加到 FormData 对象中，并使用 XMLHttpRequest 对象发送一个 POST 请求到 url 路径。
• 我们还添加了几个事件监听器，用于处理上传过程中的各种事件。onprogress 事件监听器用于更新上传进度，onload 事件监听器用于处理上传完成的情况，onerror 事件监听器用于处理上传失败的情况。