layui + thinkphp 文件上傳帶進度條（我這裏直接使用了上傳進度的百分比，沒有使用進度條）

關於後臺文件代碼（使用框架 thinkphp6）：

// 獲取表單上傳文件
$file = request()->file('file');
if(empty($file)){
   return json(['info'=>'請選擇上傳文件！','status'=>0]);
}
// 移動到框架應用根目錄/public/upload/ 目錄下
$info = $file->rule('uniqid')->move(Config::get('app.video_url'));
if($info){      
   return json(['info'=>$info->getSaveName(),'status'=>1]); //文件名稱
}else{
   return json(['info'=>'文件上傳失敗啦！','status'=>0]);
}

修改modules/upload.js，打開文件，搜索ajax：

i.ajax({
       url: l.url,
       type: "post",
       data: r,
       contentType: !1,
       processData: !1,
       dataType: "json",
       //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
       
       xhr: l.xhr(function(e){  //此處爲新添加功能
           var percent = Math.floor((e.loaded / e.total)*100);//計算百分比
           l.progress(percent);  //回調將數值返回
       }),

       //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
       headers: l.headers || {},
       success: function(i) {
           t++,
           d(e, i),
           u()
       },
       error: function() {
           n++,
           o.msg("請求上傳接口出現異常"),
           m(e),
           u()
       }
})

//以上加號包裹的代碼即爲新增代碼

html頁面以及js，這裏關於layui的引入文件我就不多說了：

<!-- html -->
<div class="layui-form-item">
    <label class="layui-form-label">視頻</label>
    <div class="layui-input-block">
        <input type="text" name="vi_url" id="vi_url">
        <div class="layui-upload">
            <a class="layui-btn" id="btn-video">上傳視頻</a>&nbsp;<span class="x-red" id="ups"></span></div>
        <!-- 進度條，我這裏沒有使用 <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar"><div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div></div> --> 
     </div>            
</div>

//js代碼
layui.use(['form','layer','laydate','upload','element'], function() {
  $ = layui.jquery;
  var form = layui.form,
    layer = layui.layer,
    laydate = layui.laydate,
    upload = layui.upload,
    element = layui.element;
    //element.init();
  //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //創建監聽函數
  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;
    }
  }
  //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //上傳視頻
  upload.render({
    elem: '#btn-video',
    url: "{:url('Video/videoAdd')}",
    data: {isAjax:'1',html:'yes'}, //額外參數
    accept: 'video', //視頻
    size: 51200,  //允許大小，最大50M
    auto: true, // 自動上傳
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    xhr: xhrOnProgress,
    progress:function(value){  //上傳進度回調 value進度值
      $("#ups").text('正在上傳'+ value +'%，請等待……');
      //element.progress('progressBar', value+'%')  //設置頁面進度條
    },
   //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    before: function(obj){
      $("#ups").text('正在上傳 0%，請等待……');
    },done: function(res){            
      if(res.status == 1){
        $("#ups").text('上傳成功 100%！');
        $("#vi_url").val(res.info);               
      }else{
        layer.msg(res.info,{icon:5});
        return false; 
      }           
    },error: function(request){
      //console.log(request);
      layer.msg('上傳失敗，請重新上傳',{icon:5});
    }
  });  
      
//以上兩處加號包裹代碼地方即爲關鍵代碼

效果圖，下面的百分比會實時變化：