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

本文介绍了使用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() {
     // 获取异常,给出错误提示
   },
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值