layui上传展示进度条

刺骨的言语ヽ痛彻心扉 2021-09-24 08:24 762阅读 0赞

<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

注：[https://www.layui.com/doc/modules/upload.html][https_www.layui.com_doc_modules_upload.html]

[https://blog.csdn.net/lin452473623/article/details/80785180][https_blog.csdn.net_lin452473623_article_details_80785180]

[https://fly.layui.com/jie/19430/page/3/][https_fly.layui.com_jie_19430_page_3]

[https_www.layui.com_doc_modules_upload.html]: https://www.layui.com/doc/modules/upload.html
[https_blog.csdn.net_lin452473623_article_details_80785180]: https://blog.csdn.net/lin452473623/article/details/80785180
[https_fly.layui.com_jie_19430_page_3]: https://fly.layui.com/jie/19430/page/3/