layui的上传视频文件添加进度条

1.在表单上传组件中，添加文件上传的主键按钮：

 

 2.选用文档中的上传文件进度的回调：

 

 我自己的代码：：：：

（html代码）

 <div class="layui-form-item">
                <label class="layui-form-label">视频上传</label>
                <button type="button" class="layui-btn" id="shipin_src">
                    <i class="layui-icon"></i>上传视频
                </button>
                <button type="button" class="layui-btn" id="uploadBtn">
                    开始上传
                </button>
                <!--缩略预览图-->
                <input type="text" disabled name="src" value="" style="width:300px">    <span id="mv_m"></span>
                <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>

　　

（js代码）

  //上传视频
        upload.render({
            elem: '#shipin_src' //绑定元素
            , url: '/admin/upload/ShiPinUpload' //上传接口
            ,accept: 'video'
            ,auto:false
            ,bindAction:'#uploadBtn'
            , progress: function(value) {
                    console.log("进度：" + value + '%');
                    element.progress('progressBar',value + '%');
                },
                choose: function(obj) {
                    obj.preview(function(index, file, result) {
                        $('input[name="src"]').html(file.name);
                        // $('input[name="src"]').val(file.data['src']);
                    });
                }
            , done: function (res) {
                if (res.code>0) {
                    //上传完毕回调
                    layer.msg(res.msg,{icon:2});
                    return false;
                }else {
                    //上传完毕回调
                    $('#mv_m').html(res.data['sizem']+'M');
                    $('input[name="src"]').val(res.data['src']);
                    layer.msg("上传成功！",{icon:1});
                }
            }
            , error: function () {
                //请求异常回调
            }
        });

　　

差点忘记 一段添加在js之前的代码：（一定要添加，这个是检测的上传进度）

      //创建监听函数
        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;
            }
        }

　　

 

3.PHP后台接收代码：

  /**
     * 视频文件上传
     *
     *
     * */
    public function ShiPinUpload()
    {
        $file = request()->file('file'); //接收文件
        //判断文件是否为空
        if($file == null){
            exit(json_encode(['code'=>1,'msg'=>'没有视频上传！']));
        }
        //获取上传图片大小
        $fileImgSize = $file->getInfo('size');
        $SizeM = $fileImgSize/1048576;
        //保存文件地址
        $info = $file->move('../public/mv_file');
        //替换文件的路径，输出路径地址
        $img = str_replace('\\','/','/mv_file'.'/'.$info->getSaveName());
        exit(json_encode(['code'=>0,'data'=>['src'=>$img,'title'=>$info->getSaveName(),'sizem'=>$SizeM]]));
    }
}

　　非常简单!!!!!!

切记文件上传功能，一定要在php.ini中定义最大上传文件Size ；

如果出现大文件上传失败：请看下一篇文章---------解决服务器接受最大上传上限