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 ；

如果出現大文件上傳失敗：請看下一篇文章---------解決服務器接受最大上傳上限