weui的uploader使用

57 篇文章 0 订阅

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();
                        }
                    }
                }
            });
        })
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值