jquery 上传 进度

在现代web应用中，文件上传已经成为了许多应用所必须的功能之一。jQuery是一种非常流行的JavaScript库，它可以帮助开发者更方便地完成文件上传功能的开发。

jQuery为我们提供了一些非常方便的工具，可以帮助我们对上传进度进行监控和控制。我们可以使用jQuery.ajax()函数来上传文件，并在过程中监控上传任务的状态。在任务进行时，我们可以使用jQuery特定的回调函数来获取上传的进度信息，以便在UI上进行显示。

$.ajax({
  type: 'POST',
  url: '/upload',
  data: formData,
  processData: false,
  contentType: false,
  xhr: function() {
    var xhr = $.ajaxSettings.xhr();
    xhr.upload.onprogress = function(e) {
      var percent = Math.floor((e.loaded / e.total) * 100) + '%';
      console.log('上传进度：' + percent);
    };
    return xhr;
  },
  success: function(data) {
    console.log('上传成功！');
  },
  error: function() {
    console.log('上传失败！');
  }
});

在上面的代码中，我们首先使用jQuery.ajax()函数来初始化一个文件上传任务。我们通常会将文件数据打包为一个FormData对象，然后通过data参数传递给ajax函数。在这里，我们告诉ajax函数不要对数据进行处理，并将ContentType设置为false，以便让浏览器自动设置Content-Type。我们还通过xhr参数来指定一个回调函数，以便在上传过程中获取上传进度信息。

在这个示例代码中，我们假设xhr.upload.onprogress回调函数已经在浏览器中的XMLHTTPRequest对象上注册。在回调函数中，我们可以通过e.loaded和e.total属性来获取已经上传的数据量和总数据量，然后计算出当前上传任务的完成进度。在UI上，我们可以使用这个进度信息来构建一个进度条，以便用户可以更清楚地知道上传的进展情况。