weui的uploader使用

1.缩略图展示加上删除按钮(校区报错弹窗)
本来是有自带的，但是需求是把删除按钮展示在缩略图的右上角

$("#uploaderFiles li").each(function () {$(this).append('<span class="delete-upload-btn"><img src="data: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();}}}});})

weui的uploader使用相关推荐

weui uploader java_实例 | WEUI框架uploader上传图片,传入服务器
// js $(function() { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/g ...
WEUI文件上传详解
本文通过我个人设计的系统为案例来教会读者使用weui的uploader,先来看看效果图: 图片上传框 PC端移动端首先,微信的官方文档不会一步一步教会你怎么用,但是在其中能发现很多使用的细节,推荐 ...
小程序制作自定义弹层添加弹层显示和隐藏动画父组件与子组件（自定义组件）之间传值
0.说明与效果本文打算用一个具体的例子,总结下这些开发过程中学习到的知识: 1.制作自定义组件,并在页面中引用 2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画 3.展示父组件与子组 ...
微信小程序mp-uploader组件
1.uploader.wxml <view class="page" data-weui-theme="{{theme}}"><view cl ...
elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 最近在使用 vue2.0开 ...
使用WEUI uploader上传图片
使用WEUI uploader上传图片,博主费了很大的劲总算找到完整的了,并且带后台接收代码,有需要的朋友拿去吧,亲测可用! 一.html代码 <link rel="styleshee ...
weui uploader java_weui.js---uploader
html: 图片上传 0/5 js: var uploadCount = 0, uploadList = []; var uploadCountDom = document.getElementByI ...
weui uploader java_小程序-扩展能力图片上传Uploader组件
微信小程序中有一些扩展组件可以用,例如其中的图片上传组件,不论样式还是上传时的动画,都比较好,在使用过程中也遇到了一些问题,在这记录一下,也期望能让后来用的人少走弯路. 第一步,首先访问网址,http ...
weui uploader java_微信小程序 WeUI·Uploader
图片上传Uploader组件. 示例代码:{ "usingComponents": { "mp-uploader": "../components/u ...

weui的uploader使用

weui的uploader使用相关推荐

最新文章

热门文章