layui 上传文件进度回调弹框显示进度条

使用的是layui.all.js  2.5.6

    <!--Layui-->
    <script src="~/lib/layui/layui.all.js"></script>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />

<script>

        var element = layui.element
            , form = layui.form
            , layer = layui.layer
            , table = layui.table
            , laydate = layui.laydate
            , util = layui.util
            , tree = layui.tree
            , upload = layui.upload;
        element.render();
    </script>

 

//初始化上传
        upload.render({
            elem: '#uploadcheckfile' //绑定元素
            , url: '/OA/API/GraduateCheckImport' //上传接口
            , accept: 'file' //允许上传的文件类型
            , exts: 'xls|xlsx'
            , choose: function (obj)
            {
                //选择文件后的回调函数
                //console.log(obj);
            }
            , before: function (obj)
            {
                //自定页
                layer.open({
                    type: 1,
                    title: "上传进度", //不显示标题
                    //closeBtn: 0, //不显示关闭按钮
                    skin: 'layui-layer-demo', //样式类名
                    area: ['420px', 'auto'], //宽高
                    content: '<div style="margin: 10px 20px;"><div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadfile"><div class="layui-progress-bar" lay-percent="" id="uploadfile"></div></div><p><span id="uploadfilemsg">正在上传</span></p></div>',
                    success: function (layero, index)
                    {
                        layer.setTop(layero); //重点2
                    }
                });
                element.render();
            }
            , progress: function (n, elem)
            {
                //上传进度回调
                var percent = n + '%'; //获取进度百分比
                $("#uploadfile").attr("lay-percent", percent);
                //element.progress('uploadfile', percent); //原谅我,我不配用这个
                element.render();
                //以下系 layui 2.5.6 新增
                console.log(percent); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。


            }
            , done: function (res, index, upload)
            {
                //上传完毕回调
                layer.msg(res.msg);
                $("#uploadfilemsg").text("上传完成");
                layer.closeAll('loading'); //关闭loading
            }
            , error: function ()
            {
                //请求异常回调
                layer.msg("请求异常");
                layer.closeAll('loading'); //关闭loading
            }
        });