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

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

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

 

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

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

 

 我自己的代码::::

(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 () {
                //请求异常回调
            }
        });

  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 ;

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

 

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

上一篇:thinkphp 使用 redis


下一篇: 标签HTML5 中的新属性