layui——文件上传进度条

layui——文件上传进度条(版本需要2.5.5之后)

<button id="xlsx" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-release" style="font-size: 20px; color: #1E9FFF;"></i>只允许xls文件</button>
<input id="xlsxFile" name="xlsxFile" type="hidden" lay-verify="required" lay-reqtext="xls文件不能为空" />
<span class="" id="xlsxFileName"></span>
<!--进度条-->
<div id="progress1" class="layui-progress layui-progress-big" style="display: none" lay-showpercent="true" lay-filter="demo1">
	<div class="layui-progress-bar layui-bg-red" lay-percent="100%"></div>
</div>

layui.use(['upload', 'element'], function () {
        let $ = layui.jquery,
        upload = layui.upload,
        element = layui.element,
        count = 0
        upload.render({ //允许上传的文件后缀
            elem: '#xlsx',
            url: '/common/upload', //上传接口
            accept: 'file', //普通文件
            exts: 'xls', //上传格式
            done: function (res) { 
                $("#xlsxFileName").text(res.myFileName)
                $("#xlsxFile").val(res.fileName)
                layer.msg('上传成功',{icon:1})
                //关闭进度条
      			setTimeout(function () {
                    $("#progress1").attr('style', 'display:none')
                }, 2000)
            },
            progress: function (n, elem) {
                //第一次执行进度回调函数的时候，对进度条进行初始化
                if (count=== 0) {
                    layui.element.init()
                    count++
                }
                let percent = n + '%' //获取进度百分比
                // $('#demo1').attr('lay-percent',percent)
                element.progress('demo1', percent)
                //显示进度条
                $("#progress1").attr('style', 'display:block')
            }
        })
    })