借阅
前端代码
选择多文件
图片大小状态操作
开始上传
JS 代码
layui.use(‘upload‘, function(){
var upload = layui.upload;
console.log(upload);
//执行实例
//多文件列表示例
var demoListView = $(‘#demoList‘)
,uploadListIns = upload.render({
elem: ‘#testList‘
,url: ‘{:U("Admana/uploadAll")}‘
,accept: ‘file‘
,multiple: true
,auto: false
,bindAction: ‘#testListAction‘
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $([‘
‘,‘
,‘
‘+ (file.size/1014).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();
uploadListIns.config.elem.next()[0].value = ‘‘; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.img != ‘‘){
var tr = demoListView.find(‘tr#upload-‘+ index),tds = tr.children();
tds.eq(2).html(‘上传成功‘);
tds.eq(3).html(‘‘); //清空操作
var str = ‘‘;
$(‘#demoList‘).append(str);
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find(‘tr#upload-‘+ index)
,tds = tr.children();
tds.eq(2).html(‘上传失败‘);
tds.eq(3).find(‘.demo-reload‘).removeClass(‘layui-hide‘); //显示重传
}
});
});