thinkphp+layui 文件上传显示进度条

后端代码：

public function file(){
        $fileKey = array_keys(request()->file());
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file($fileKey['0']);
        // 移动到框架应用根目录/public/uploads/ 目录下
        $info = $file->validate(['ext' => 'zip,rar,pdf,swf,ppt,psd,ttf,txt,xls,doc,docx,mp4'])->move('uploads/files');
        if($info){
            $result['code'] = 0;
            $result['info'] = '文件上传成功!';
            $path=str_replace('\\','/',$info->getSaveName());

            $result['url'] = '/uploads/files/'. $path;
            $result['ext'] = $info->getExtension();
            $result['size'] = byte_format($info->getSize(),2);
            return $result;
        }else{
            // 上传失败获取错误信息
            $result['code'] =1;
            $result['info'] = '文件上传失败!';
            $result['url'] = '';
            return $result;
        }
    }

修改modules/upload.js，打开文件，搜索ajax，新增xhr：

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="true" lay-filter="demo" style="margin-left: 25%;display:none;"><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进度值
      $('.layui-progress').show();
      element.progress('demo', value + '%')  //设置页面进度条
    },
   //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    done: function(res){            
      if(res.status == 1){
        $("#vi_url").val(res.info);               
      }else{
        layer.msg(res.info,{icon:5});
        return false; 
      }           
    },error: function(request){
      //console.log(request);
      layer.msg('上传失败，请重新上传',{icon:5});
    }
  });