layui 进度条 （批量上传进度条显示）

在上一个代码块中，我们已经实现了文件的批量上传功能。接下来，我们将添加进度条显示的功能。

首先，我们需要在HTML中添加一个进度条元素，并为每个文件创建一个进度条实例：

<div class="layui-progress" lay-showPercent="true" id="uploadProgress">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>

然后，我们需要在JavaScript中更新上传文件的代码，以便跟踪上传进度并更新进度条：

// 文件上传
upload.render({
    elem: '#testList'
    ,url: '/upload/'
    ,multiple: true
    ,before: function(obj){
        // 重置进度条
        $('#uploadProgress').find('.layui-progress-bar').css('width', '0%');
        
        layer.load(2); // 打开loading
        
        obj.preview(function(index, file, result){
            var tr = $(['<tr id="upload-'+ index +'">'
                ,'<td><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"></td>'
                ,'<td>'+ file.name +'</td>'
                ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                ,'<td>'
                    +'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete" data-index="'+ index +'">删除</button>'
                +'</td>'
            ,'</tr>'].join(''));
            
            // 单个文件上传进度条
            tr.find('.demo-delete').on('click', function(){
                delete files[index]; // 删除对应的文件
                tr.remove();
                uploadListIns.config.elem.next().find('.layui-upload-list').data('upload-select', '');
            });
            
            demoListView.append(tr);
        });
    }
    ,done: function(res, index, upload){
        if(res.code == 0){ // 上传成功
            var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).find('.demo-delete').removeClass('layui-btn-danger').addClass('layui-btn-normal').prop('disabled', true);
        }else{
            // 上传失败
            return layer.msg('上传失败');
        }
    }
    ,allDone: function(obj){
        // 当文件全部上传完毕时，关闭loading
        layer.closeAll('loading');
    }
    ,error: function(){
        // 请求异常回调
    }
    ,progress: function(n, elem){
        // 进度条更新
        var percent = n + '%'; // 计算百分比
        $('#uploadProgress').find('.layui-progress-bar').css('width', percent).attr('lay-percent', percent); // 更新进度条
    }
});

在这段代码中，我们使用了\`pr