weui的uploader使用

article/2025/10/3 21:52:37

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'); //点击图片对应的idvar 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();}}}});})