layui上传展示进度条


        <div class="layui-row layui-col-space10 layui-form-item">

            #@colStart("视频文件",6)
               <input type="text" readonly id="show_cover_pic" class="layui-input" name="studyVideo.video" value="#(studyVideo.video??'')"
               		lay-verType='tips' lay-verify="required|" maxlength="50" placeHolder="必填"/>
            <button type="button" class="layui-btn" id="cover"><i class="layui-icon"></i>上传视频</button>

            <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" >
                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>

            <p id="coverText"></p>
            #@colEnd()


        </div>

    #define js()
        <script>

                layui.use(['upload','element'], function(){
                var $ = layui.jquery
                    ,upload = layui.upload
                    ,element = layui.element;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#cover'
                    ,accept: 'video' //视频
                    ,url: '/manager/saveUpload'
                    ,progress: function(n, elem){
                        var percent = n + '%' //获取进度百分比
                        element.progress('demo', percent); //可配合 layui 进度条元素使用

                        //以下系 layui 2.5.6 新增
                       // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                      }
                    ,done: function(res){
                        //console.log("%O",res);
                        layer.msg('上传成功');
                        $("#show_cover_pic").attr("value",res.url);

                    }
                    ,error: function(){

                        var coverText = $('#coverText');
                        coverText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');

                    }
                });

            });

        </script>
    #end