在上一个代码块中,我们已经实现了文件的批量上传功能。接下来,我们将添加进度条显示的功能。
首先,我们需要在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