[轉]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);
  });
       
});