layui（文件）上传添加(模拟)进度条，（后台返回数据真实进度条）

说明：文件主要修改upload.js 组件，但不影响用原组件的使用（已测）

代码地址（包含php后台演示部分）：https://github.com/shulongfei/demo-manage.git

在线访问：https://shulongfei.github.io/demo-manage/#layui/upload

参考文章：https://www.cnblogs.com/youmingkuang/p/9183528.html；

1、创建监听函数

// 该部分代码主要使用ajax的xhr属性，我copy别人的，自己也不会写，应该不用管。

   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;
       }
   };

2、页面上传文件加载

// 看看就行，具体内容demo里面有，缺陷，后台必须根据layui格式返回，可看具体layui文档。
load.render({
  elem: '#test-upload-change'
  ,url: 'up.php'
  ,auto:false
  ,exts: 'zip|rar|7z'
  ,xhr:xhrOnProgress
  ,progress:function(value){//上传进度回调 value进度值
    console.log(value);
    element.progress('demo', value+'%')//设置页面进度条
   }
  ,bindAction: '#test-upload-change-action'
  ,before: function(input){
  //返回的参数item，即为当前的input DOM对象
    layer.load(); //上传loading
      console.log('文件上传中');
  }
  ,done: function(res){
    console.log(res);
    layer.closeAll();
    layer.msg("上传成功");
  }
});

3、更改upload.js. 这里很重要，属于核心内容（也是我唯一和别人改的不同的地方）

    t.ajax({
      url: l.url,
      type: l.method,
      data: r,
      contentType: !1,
      processData: !1,
      dataType: 'json',
      
      xhr: l.xhr ? l.xhr(function(e){//此处为新添加功能
          console.log(e);
          var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
          if(l.progress){
            l.progress(percent);//回调将数值返回
          } 
      }) : undefined,

      headers: l.headers || {},
      success: function (t) {
        i++, d(e, t), u()
      },
      error: function () {
        n++, o.msg('请求上传接口出现异常'), m(e), u()
      }
    })