ajax获取上传进度

$.ajax({
  type: "post",
  url: uploadUrl,
  data: formData,
  processData: false,
  contentType: false,
  xhr : function() { //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
    myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) { //检查upload属性是否存在
     //绑定progress事件的回调函数
      myXhr.upload.addEventListener(
        'progress',
        progressHandlingFunction,
        false);
      }
      return myXhr; //xhr对象返回给jQuery使用
    },
  beforeSend: function() {
    ot = new Date().getTime();   //设置上传开始时间
    oloaded = 0;//设置上传开始时,以上传的文件大小为0
    console.log("开始上传")
  },
  success: function (data) {
    console.log("上传成功")
  },
  error: function (e) {
    console.log("上传失败")
  }
});
function progressHandlingFunction(evt) {
    var nt = new Date().getTime();//获取当前时间
    var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为s
    ot = new Date().getTime(); //重新赋值时间,用于下次计算
    var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
    oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
    //上传速度计算
    var speed = perload/pertime;//单位b/s
    var bspeed = speed;
    var units = 'b/s';//单位名称
    if(speed/1024>1){
        speed = speed/1024;
        units = 'k/s';
    }
    if(speed/1024>1){
        speed = speed/1024;
        units = 'M/s';
    }
    speed = speed.toFixed(1);
    //剩余时间
    var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
    var percent = evt.loaded / evt.total * 100;
    console.log('当前速度:'+speed+units+',剩余时间:'+resttime+'s,当前进度:'+percent.toFixed(2)+"%")
}
posted @ 2020-08-07 17:24  果茶加冰  阅读(691)  评论(0编辑  收藏  举报