jq ajax 和 axios 获取上传进度的方法

在JavaScript中，你可以使用原生的XMLHttpRequest对象或者更现代的fetchAPI来实现文件上传进度跟踪。对于jq ajax和axios这两个库，它们都提供了监听上传进度的功能。

使用XMLHttpRequest的例子：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
 
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log(percentComplete.toFixed(2) + '%');
  }
};
 
xhr.send(formData); // 假设你已经有了一个名为formData的FormData对象

使用fetch的例子：

var formData = new FormData();
// 添加文件到formData
 
fetch('/upload', {
  method: 'POST',
  body: formData,
  headers: {
    'X-CSRF-Token': 'your-csrf-token' // 如果需要的话
  }
})
.then(response => {
  return response.blob();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error(error);
});
 
// 添加进度监听
fetch('/upload', {
  method: 'POST',
  body: formData,
  headers: {
    'X-CSRF-Token': 'your-csrf-token' // 如果需要的话
  },
  onUploadProgress: function(progressEvent) {
    if (progressEvent.lengthComputable) {
      var percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
      console.log(percentComplete.toFixed(2) + '%');
    }
  }
});

使用jq ajax的例子：

var formData = new FormData();
// 添加文件到formData
 
$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  xhr: function() {
    var myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
      myXhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / e.total) * 100;
          console.log(percentComplete.toFixed(2) + '%');
        }
      }, false);
    }
    return myXhr;
  },
  success: function(data) {
    console.log(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Error: ' + textStatus + ' - ' + errorThrown);
  }
});

使用axios的例子：

var formData = new FormData();
// 添加文件到formData
 
axios.post('/upload', formData, {
  onUploadProgress: function(progressEvent) {
    if (progressEvent.lengthComputable) {
      var percentComplete = (progressEvent.loa