1.缩略图展示加上删除按钮(校区报错弹窗)
本来是有自带的,但是需求是把删除按钮展示在缩略图的右上角
$("#uploaderFiles li").each(function () {
$(this).append('<span class="delete-upload-btn"><img src="images/common/icon-cross-no-bg.svg" alt=""></span>')
});
//点击小图查看大图
$(document).on("click","#uploaderFiles li",function(){
var url = $(this).attr('url'); //图片存放地址
weui.gallery(url);
$('.weui-gallery__del').remove();
//去掉span中的字符串,要加上这句
$('.weui-gallery span').html('');
})
$(document).on("click",".delete-upload-btn",function(e){
e.stopPropagation();
var $par=$(this).parents("li");
var url =$par.attr('url'); //图片存放地址
var DBId = $par.attr('db-id'); //图片唯一编号
var id = $par.attr('data-id'); //点击图片对应的id
--uploadCount;
var param = {};
param.DBId = DBId;
param.imgUrl = url;
$.ajax({
url: "img-api/delete_imgs",
type: "delete",
contentType: "application/json;charset=UTF-8",
dataType: "json",
data: JSON.stringify(param),
success: function (msg) {
console.log(msg);
},
error: function (xhr, textstatus,
thrown) {}
});
$par.remove();
if (uploadCount == 3) {
$(".weui-uploader__input-box").hide();
} else {
$(".weui-uploader__input-box").show();
}
})
weui自带的删除图片
$('#uploaderFiles').click(function (e) {
var target = e.target;
while (!target.classList.contains('weui-uploader__file') && target) {
target = target.parentNode;
}
if (!target) return;
//从图片对应的li标签中获得所需属性
var url = target.getAttribute('url'); //图片存放地址
var DBId = target.getAttribute('db-id'); //图片唯一编号
var id = target.getAttribute('data-id'); //点击图片对应的id
var gallery = weui.gallery(url, {
className: 'custom-name',
onDelete: function () {
//删除图片的回调
var isDelete = confirm('确定删除该图片?');
if (isDelete) {
--uploadCount;
uploadCountDom.innerHTML = uploadCount; //处理角标
for (var i = 0, len = uploadList.length; i < len; ++i) {
var file = uploadList[i];
if (file.id == id) {
$("#uploaderFiles li").each(function () {
//找到对应的li标签,请求后台删除文件
if ($(this).attr("data-id") == id) {
var param = {};
param.DBId = DBId;
param.imgUrl = url;
$.ajax({
url: "img-api/delete_imgs",
type: "delete",
contentType: "application/json;charset=UTF-8",
dataType: "json",
data: JSON.stringify(param),
success: function (msg) {
console.log(msg);
},
error: function (xhr, textstatus,
thrown) {}
});
}
});
file.stop();
break;
}
}
target.remove();
gallery.hide();
// 添加3张后隐藏上传按钮
if (uploadCount == 3) {
$(".weui-uploader__input-box").hide();
} else {
$(".weui-uploader__input-box").show();
}
}
}
});
})