• [jquery]为jQuery.ajax添加onprogress事件


    原理:

    给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程

    var xhr = new XMLHttpRequest();  xhr.upload.onprogress = function(e) {}

    因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法

    所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现

    首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象

    var xhrOnProgress=function(fun) {
      xhrOnProgress.onprogress = fun; //绑定监听
      //使用闭包实现监听绑
      return function() {
        //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
        var xhr = $.ajaxSettings.xhr();
        //判断监听函数是否为函数
        if (typeof xhrOnProgress.onprogress !== 'function')
          return xhr;
        //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
        if (xhrOnProgress.onprogress && xhr.upload) {
          xhr.upload.onprogress = xhrOnProgress.onprogress;
        }
        return xhr;
      }
    }
    

    上传时使用$.ajax方法

    var formData = new FormData(document.forms[0]);
    $.ajax({ url : url, type : 'POST',
      data : formData,
      //不处理表单数据
      processData : false,
      //不处理contentType
      contentType : false,
      beforeSend:function(){
          console.log("start transfer");
      },
      success : function(responseStr) {
          console.log(responseStr);
      },
      error : function(responseStr) {
         console.log("error");
      },
     //用自定义的xhr代替jquery的xhr xhr:xhrOnProgress(function(e){ var percent=e.loaded / e.total;//计算百分比 }) });
  • 相关阅读:
    得到cxgrid筛选后的记录数
    服务器之ipmitool
    CentOS6.8部署SVN
    NGINX快速部署
    Nginx模块系列之auth_basic模块
    持续集成、持续交付、持续部署
    CentOS6.X 升级内核至 3.10
    Dmidecode
    新建虚拟机
    Linux之(tomcat)服务之服务调优
  • 原文地址:https://www.cnblogs.com/yiyide266/p/6932250.html
Copyright © 2020-2023  润新知