layUi上传多文件删除后继续上传会将删除前的文件继续上传解决办法:
先看效果页面
html
<div class="layui-input-block layedit-tool-help" style="float: left">
<div>
<img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image" style="width: 400px;height: 400px">
</div>
<div class="layui-form-item" style="margin-top: 20px">
<div style="float: left;margin-left:10px;">
<div>
<img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image0" style="width: 60px;height: 60px;cursor:pointer">
</div>
<div style="width: 15px" class="aaa">
<button type="button" class="layui-btn layui-btn-xs" id="upload" lay-data="{index:'0'}" style="margin-top: 10px;margin-left: 5px">
<i class="layui-icon"></i>上传
</button>
<button type="button" class="layui-btn layui-btn-xs" id="del0" style="margin-top: 10px;margin-left: 5px;display: none">
<i class="layui-icon"></i>删除
</button>
</div>
</div>
<div style="float: left;margin-left:20px;">
<div>
<img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image1" style="width: 60px;height: 60px;cursor:pointer">
</div>
<div style="width: 15px">
<button type="button" class="layui-btn layui-btn-xs " id="upload1" lay-data="{index:'1'}" style="margin-top: 10px;margin-left: 5px">
<i class="layui-icon"></i>上传
</button>
<button type="button" class="layui-btn layui-btn-xs" id="del1" style="margin-top: 10px;margin-left: 5px;display: none">
<i class="layui-icon"></i>删除
</button>
</div>
</div>
<div style="float: left;margin-left:20px;">
<div>
<img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image2" style="width: 60px;height: 60px;cursor:pointer">
</div>
<div style="width: 15px">
<button type="button" class="layui-btn layui-btn-xs " id="upload2" lay-data="{index:'2'}" style="margin-top: 10px;margin-left: 5px">
<i class="layui-icon"></i>上传
</button>
<button type="button" class="layui-btn layui-btn-xs" id="del2" style="margin-top: 10px;margin-left: 5px;display: none">
<i class="layui-icon"></i>删除
</button>
</div>
</div>
<div style="float: left;margin-left:20px;">
<div>
<img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image3" style="width: 60px;height: 60px;cursor:pointer">
</div>
<div style="width: 15px">
<button type="button" class="layui-btn layui-btn-xs " id="upload3" lay-data="{index:'3'}" style="margin-top: 10px;margin-left: 5px">
<i class="layui-icon"></i>上传
</button>
<button type="button" class="layui-btn layui-btn-xs" id="del3" style="margin-top: 10px;margin-left: 5px;display: none">
<i class="layui-icon"></i>删除
</button>
</div>
</div>
<div style="float: left;margin-left:20px;">
<div>
<img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image4" style="width: 60px;height: 60px;cursor:pointer">
</div>
<div style="width: 15px">
<button type="button" class="layui-btn layui-btn-xs " id="upload4" lay-data="{index:'4'}" style="margin-top: 10px;margin-left: 5px">
<i class="layui-icon"></i>上传
</button>
<button type="button" class="layui-btn layui-btn-xs" id="del4" style="margin-top: 10px;margin-left: 5px;display: none">
<i class="layui-icon"></i>删除
</button>
</div>
</div>
</div>
<div class="layui-form-item" style="width:400px;color: red">
<span>
说明:为了商品展示图片的美观性,请注意</br>
1、图片需为正方形;</br>
2、建议上传800*800的方图,最小尺寸不得小于450*450;</br>
3、单张图片大小不可超过2M;
</span>
</div>
</div>
js实现
function uploadCommers(id,array) {
var fileId = "";
var uploadInst = upload.render({
elem: '#'+id //绑定元素
,url: url_fileUpload+'api/file/fileUpload?bid=&ftype=图片'
,auto: true //选择文件后不自动上传
,multiple:true
,size:100
// ,bindAction: '#fileAction'
,before: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
var index1 =this.index;
//读取本地文件
obj.preview(function(index, file, result){
if(index1 == "0"){
var tr = $("#image").attr("src",result);
}
var tr = $("#image"+index1).attr("src",result);
$("#"+id).hide();
$("#del"+index1).show();
$("#del"+index1).on("click",function () {
//请求删除
$.ajax({
url:url_fileUpload+'api/file/deleteFile',
type: "POST",
data:{
"id":fileId
},
dataType: "json",
success: function(data){
if(data.code==0){
delete files[index];
uploadInst.config.elem.next()[0].value = '';
$("#del"+index1).hide();
$("#"+id).show();
$("#image"+index1).attr("src","../../plugins/layui/images/default.jpg");
$(".aaa").load(location.href+" .aaa");
form.render();
//location.reload();
}else{
layer.msg(data.msg, {icon: 5});
}
}
});
});
});
}
,allDone: function(obj){ //当文件全部被提交后,才触发
}
,done: function(res, index, upload){
if(res.code == 0) { //上传成功
fileId = res.data.id;
array.push(res.data);
console.log(res.data.id)
}
}
,error: function(res,index, upload){
}
});