说明:layui本来多图片上传就可以限制上传重复图片,但是不会提示任何东西,可以利用
uploadListIns = upload.render({})
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
后续只需要自己做重复判断提示即可
html
<label class="layui-form-label">图片上传</label>
<div class="layui-input-inline">
<button type="button" id="imgbtn" style="text-align: center;margin: 5px 0;" class="layui-btn ">上传图片</button>
<input class="layui-hide" name="imggoods" id="imggoods" value="">
</div>
<div id="imgrigth" style="clear: both;overflow:auto;width:100%;text-align: center; ">
<!-- <div style="float:left">
<img src="upload/119111132118.jpg" class="rigthimg">
<div><button type="button" class="layui-btn">删除该张</button></div>
</div> -->
</div>
js
//监听删除等待上传图片
$('#imgrigth').on('click','.delimg',function() {
$("#" + this.name).remove();
var imgi = uploadimg.indexOf(this.name);
delete uploadimg[imgi]; //删除对应的文件
var cp = new Array();
for (var i in uploadimg) {
cp.push(uploadimg[i]);
}
uploadimg = cp;
delete imgdatas[this.id]; //删除对应的文件
console.log(imgdatas);
$("#imgbtn").removeClass("layui-btn-disabled");
$("#imgbtn").attr("disabled", false);
});
upload.render({
elem: '#imgbtn',
url: '/uploadimages',
multiple: true,
acceptMime: 'image/*',
auto: false,
bindAction: '#addall',
choose: function(obj) {
//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
obj.preview(function(index, file, result) {
var imgname = file.name.substr(0, file.name.lastIndexOf("."));
if (uploadimg.length == 0) {
uploadimg.push(imgname);
$("#imgrigth").append('<div id="' + imgname + '" style="float:left">' +
'<img src="' + result + '" class="rigthimg">' +
'<div><button type="button" name="' + imgname + '" id="'+index+'" class="layui-btn delimg" ">删除该张</button></div>' +
'</div>')
} else {
var upstart = true;
for (var j in uploadimg) {
if (imgname == uploadimg[j]) {
upstart = false;
}
}
if (upstart) {
imgdatas = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
if (uploadimg.length < 4) {
uploadimg.push(imgname);
$("#imgrigth").append('<div id="' + imgname + '" style="float:left">' +
'<img src="' + result + '" class="rigthimg">' +
'<div><button type="button" name="' + imgname + '" id="'+index+'" class="layui-btn delimg" ">删除该张</button></div>' +
'</div>')
}
if (uploadimg.length == 4) {
$("#imgbtn").addClass("layui-btn-disabled");
$("#imgbtn").attr("disabled", true);
}
} else {
layer.msg('不能上传相同图片');
}
}
});
},
done: function(res) {
var item = this.item;
if (res.success) {
layer.msg('上传成功');
var imggoods = $("#imggoods").val();
$("#imggoods").val(imggoods + res.msg + ",")
} else {
layer.msg('上传失败');
}
},
allDone: function(obj) { //当文件全部被提交后,才触发
console.log("图片总数" + obj.total); //得到总文件数
console.log("上传成功数" + obj.successful); //请求成功的文件数
console.log("上传失败数" + obj.aborted); //请求失败的文件数
//图片上传之后再执行保存数据事件!!!!!!!
ordersave();
}
});