ajax文件上传监听进度xhr.upload.onprogress-优快云博客

本文链接：https://blog.youkuaiyun.com/curryFMVP/article/details/113654639

本文介绍了使用jQuery和Vue实现Ajax文件上传并监听上传进度的方法。通过设置xhr.upload.onprogress事件，可以实时显示文件上传的百分比，适用于需要展示文件上传进度的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax文件上传监听进度xhr.upload.onprogress

jQuery中的ajax上传方式

$.ajax({
	 xhrFields: {
	      withCredentials: true
	  },
	  crossDomain: true == !(document.all),
	  type: 'POST', // 请求方式
	  url: globleObj.domain + '/wjw/workPlan/uploadPdf', // 接口地址
	  data: addFd, // 请求参数
	  dataType: 'json',// 返回参数格式
	  cache: false,
	  processData: false, // 告诉jQuery不要去处理发送的数据
	  contentType: false,// 告诉jQuery不要去设置Content-Type请求头
	  success: function (data) {
	  },
	  error: function () {
	  },
	  xhr: function() {
	      var xhr = $.ajaxSettings.xhr();
	      if (xhr.upload) {
	          xhr.upload.onprogress = function(e) {
	              if (e.lengthComputable) {
	                  $(".barColor").show();
	                 var percent = Math.floor( e.loaded / e.total * 100);
	                  console.log(percent);
	                  if(percent == 100){
	                      // $(".barColor").hide();
	                  }else{
	                      // $(".barColor").show();
	                      $('.progressInfo').css('width', (percent * 6)+'px');
	                      $('.progressInfo').html(percent + '%');
	                  }
	              }
	          };
	      }
	      return xhr;
	  }
})

vue中的ajax上传方式

$.ajax({
   url: url,
   type: 'POST',
   data: formData,
   cache: false,
   contentType: false,
   processData: false,
   xhr: () => {
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
       xhr.upload.onprogress = (e) => {
         if (e.lengthComputable) {
           that.progressPercent = Number(Math.floor( e.loaded / e.total * 100));
           if(percent == 100){
             //文件上传进度达到100之后的操作
           }
         }
       };
     }
   },
   success: () => {
     // 文件上传成功后执行的操作
   }
   error: function() {
     // 获取异常，给出错误提示
   },
});