[转]LayUI文件上传加进度条

https://www.cnblogs.com/tangbang/p/10121061.html

1，页面

<div class="layui-row layui-col-space5">
<div class="layui-form-item">
<label class="layui-form-label"><i class="i-red"></i>邀请说明</label>
<div class="layui-input-block">
<div class="layui-col-md2">
<button type="button" style="margin-top: 2px;" class="layui-btn" id="js_upload"><i class="layui-icon"></i>上传文件</button>
</div>
<div class="layui-col-md7">
<input type="text" name="fileName"  autocomplete="off" maxlength="50" class="layui-input js_upload_file_name" value="${inviteMap.fname }" placeholder="" readonly="readonly">
</div>
</div>
  </div>
  <input type="hidden" name="fileId" class="js_resource_invite_file_id" value="${inviteMap.file_id }">
</div>


<!--弹出进度条-->
<div id="uploadLoadingDiv" style="display: none;">
  <div class="layui-progress" lay-showpercent="true" lay-filter="js_upload_progress" style="margin: 10px;">
    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
  <div class="layui-form-item" style="text-align: center">
    <button class="layui-btn layui-btn-normal js_upload_progress_bar_sure" >确定</button>
  </div>
</div>

 

2.upload.js 搜索ajax

$.ajax({
    url: l.url
    ,type: l.method
    ,data: formData
    ,contentType: false 
    ,processData: false
    ,dataType: 'json'
    ,xhr:l.xhr(function(e){//此处为新添加功能
         var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
         l.progress(percent);//回调将数值返回
     })
     ,success: function(res){
         successful++;
         done(index, res);
         allDone();
     }
     ,error: function(e){
         console.log(e)
         aborted++;
         that.msg('请求上传接口出现异常');
         error(index);
         allDone();
     }
});

3.js

layui.use(['form', 'layedit', 'laydate','element', 'upload','table'], function () {
  var upload = layui.upload;
  var form=layui.form;
  var element = layui.element;
  var $=layui.$;
  var table = layui.table;
  var laydate = layui.laydate;

  element.init();
  form.render();

  //日期初始化
  laydate.render({
    elem: '#date_start',
    type: 'datetime'
  });

  //创建监听函数
  var xhrOnProgress=function(fun) {
    xhrOnProgress.onprogress = fun; //绑定监听
    //使用闭包实现监听绑
    return function() {               
      var xhr = $.ajaxSettings.xhr(); //通过此方法获得XMLHttpRequest对象
      //判断监听函数是否为函数
      if (typeof xhrOnProgress.onprogress !== 'function') {
        return xhr;
      }
      //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
      if (xhrOnProgress.onprogress && xhr.upload) {
        xhr.upload.onprogress = xhrOnProgress.onprogress;
      }
      return xhr;
    }
  }
        
  upload.render({
    elem: '#js_upload'
    ,url: gContextPath+"/uploadfile2.htm",
    ,multiple: false
    ,before:function(){
      element.progress('js_upload_progress', '0%'); //设置页面进度条
      layer.open({
        type: 1,
        title: '上传进度',
        closeBtn: 1, //不显示关闭按钮
        area: ['300px', '170px'],
        shadeClose: false, //开启遮罩关闭
        content: $("#uploadLoadingDiv").html(),
        offset: '100px'
      });
    }
    ,xhr:xhrOnProgress
    ,progress:function(value){//上传进度回调 value进度值
      element.progress('js_upload_progress', value+'%');//设置页面进度条
    }
    ,field: 'file'
    ,accept: 'images'
    ,data: {
      "index": 1,
      "appCbnid": ""
     }
    ,accept: 'file'
    //普通文件
    ,done: function (res) {
      console.log(res);
      $(".js_upload_file_name").val(res[0].data.filename);
      $(".js_resource_invite_file_id").val(res[0].data.fid);
    }
    ,error: function () {
      layer.alert("上传失败",{offset: '100px'});
      return false;
    }
  });

  //关闭进度条提示
  $(document).on('click','.js_upload_progress_bar_sure',function(){
    layer.close(layer.index);
  });
       
});