描述
项目中实际使用的例子,不是单一个上传。
是添加公告、添加帖子等等模块中的一个功能。
从layui官网的例子做一些改动,没有进度条(太难了),而是在每一行加了loading效果。
此功能是选择文件后直接上传。
如果用的官网例子,选择文件先不上传的那种,改一下不难。
功能描述
点击选择文件按钮,选择文件后在表格追加一行,直接上传
上传中:
上传成功:
删除的是文件的id,入表时的关联字段,不需要可删除(官网例子中删除的是上传列表中的数据)
上传失败:
这里没图,就是状态为:上传失败,没有操作按钮(官网例子中有重传按钮功能)
实施
attachmentId:字符串。如公告表中的字段attachmentId,表示关联的文件id(id+逗号)[1001,1002,1003,1004,]
html
<input>是用来放已上传文件的id(形如:attachmentId="id1,id2,id3,"),用来入表的。
<input type="text" id="attachmentId" style="display: none">
<div class="layui-form-item">
<div class="layui-upload">
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
</div>
</div>
js
layui.use(['upload'], function(){
var upload = layui.upload;
//多文件列表上传
var attachmentId = "";//上传的文件id串
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: ...
,accept: 'file'
,multiple: true
,auto: true
,before: function(obj){
}
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><i class="layui-icon layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete layui-hide">删除</button>'
,'<input class="layui-hide" type="text" id='+index+'>'
,'</td>'
,'</tr>'].join(''));
//删除
tr.find('.demo-delete').on('click', function(){
var tem = $("#"+index).val();
attachmentId = attachmentId.replace(tem,"");
$("#attachmentId").val(attachmentId);
delete files[index];
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
delete files[index];
});
}
,done: function(res, index, upload){
var data = res;
var attachmentId_tem = data.fileName + ",";
$("#"+index).val(attachmentId_tem);
attachmentId += (attachmentId_tem);
$("#attachmentId").val(attachmentId);
if("这里可以加上自己的判断"){ //上传成功
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-hide'); //显示删除
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('<span style="color: #FF5722;">上传失败</span>');
return delete this.files[index];
}
});
})
修改
在修改功能中,需要回显已上传列表,并且可以删除已上传文件。
把上面代码中的的id改一下就行,其他基本不用改,或者想办法复用上面的代码也可以,我自己没复用。
用attachmentId查出已上传的文件(或者说已关联的文件),下面是ajax请求中success中的处理。
success: function (res) {
var data = res.list;
for (var i=0;i<data.length;i++) {
var tr = $(['<tr id="upload-'+ i +'">'
,'<td>'+ data[i].uploadFileName +'</td>'
,'<td>'+ data[i].fileSize +'kb</td>'
,'<td><span style="color: #5FB878;">已上传</span></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete2">删除</button>'
,'<input class="layui-hide attId" value="'+data[i].id+'," type="text">'
,'</td>'
,'</tr>'].join(''));
$('#demoList2').append(tr);
}
// 已有文件删除
$('.demo-delete2').on('click', function(){
var attachmentId2 = $("#attachmentId2").val();
var tem = $(this).parents("tr").find(".attId").val();
attachmentId2 = attachmentId2.replace(tem,"");
$("#attachmentId2").val(attachmentId2);
$(this).parents("tr").remove();
});
}
结语
还有一些小的页面bug,自己多测一下(比如打开弹出层时先清空文件表格的html,否则上传之后关闭弹框再打开会出现上次的内容)
整个功能都围绕attachmentId,一定注意。