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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42457316/article/details/81017471

说明:文件主要修改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()
      }
    })

 

展开阅读全文

没有更多推荐了,返回首页