使用layui上传多文件
HTML部分
<div class="layui-form-item" >
<label class="layui-form-label">上传多文件</label>
<input type="hidden" id="carFullPicture" name="carFullPicture" style="margin-left: 35px;"/>
<div class="layui-upload">
<button type="button" class="layui-btn " id="testList" style="margin-left: -8px;"><i class="layui-icon layui-icon-upload"></i>选择多文件</button>
<div class="layui-upload-list" style="margin-left: 115px;display: none" id="table" >
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
<th>图片显示</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
</div>
</div>
js部分
layui.use(['jquery','layer','form','table','laypage','upload'], function() {
var $ = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var demoListView = $('#demoList');
var uploadListIns =upload.render({
elem: '#testList'
,url: '/common/upload'
,accept: 'images'
,data:{}
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile();
$("#table").css("display","");
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>等待上传\</td>'
,'\<td>'
,'\<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传\</button>'
,'\<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除\</button>'
,'\</td>'
,'\<td>'
,'\</tr>'].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 = '';
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
***appendUrl(res.url);
if(res.code == 200)
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
var src = '\<img style="width: 120px;" src='+res.url+' >'
tds.eq(2).html('\<span style="color: #5FB878;">上传成功\</span>');
tds.eq(3).html('');
tds.eq(4).html(src);
return delete this.files[index];
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('\<span style="color: #FF5722;">上传失败<\/span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide');
}
});
})
function appendUrl(url) {
var input=$("#carFullPicture").val();
if(input != "" && input != undefined){
var valObj = input.split(",");
$("#carFullPicture").val($("#carFullPicture").val()+","+url);
}else {
$("#carFullPicture").val($("#carFullPicture").val()+url);
}
}
效果图
![上传之前的列表显示](https://i-blog.csdnimg.cn/blog_migrate/9cad53f76f47a4a216a292a9ed59c1a9.png)
![上传之后的图片显示回调](https://i-blog.csdnimg.cn/blog_migrate/5891ed266c3118fa7f6afa4d44588218.png)