mirror of
https://gitee.com/layui/layui.git
synced 2025-10-26 18:59:15 +08:00
3.5 KiB
3.5 KiB
选择多文件
开始上传
<script>
layui.use(function(){
var upload = layui.upload;
var element = layui.element;
var $ = layui.$;
// 制作多文件上传表格
var uploadListIns = upload.render({
elem: '#ID-upload-demo-files',
elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
accept: 'file',
multiple: true,
number: 3,
auto: false,
bindAction: '#ID-upload-demo-files-action',
choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
// 读取本地文件
obj.preview(function(index, file, result){
var tr = $(['',
''+ file.name +'',
''+ (file.size/1024).toFixed(1) +'kb',
'| 文件名 | 大小 | 上传进度 | 操作 |
|---|
',
'',
'重传',
'删除',
'',
''].join(''));
// 单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
// 删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; // 删除对应的文件
tr.remove(); // 删除表格行
// 清空 input file 值，以免删除后出现同名文件不可选
uploadListIns.config.elem.next()[0].value = '';
});
that.elemList.append(tr);
element.render('progress'); // 渲染新加的进度条组件
});
},
done: function(res, index, upload){ // 成功的回调
var that = this;
// if(res.code == 0){ // 上传成功
var tr = that.elemList.find('tr#upload-'+ index)
var tds = tr.children();
tds.eq(3).html(''); // 清空操作
delete this.files[index]; // 删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
},
allDone: function(obj){ // 多文件上传完毕后的状态回调
console.log(obj)
},
error: function(index, upload){ // 错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index);
var tds = tr.children();
// 显示重传
tds.eq(3).find('.demo-reload').removeClass('layui-hide');
},
progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
}
});
});
</script>