一流的龙岗网站制作,大众网站平安建设之星,个人如何开网站,做网站賺钱jQuery WeUI 是专为微信公众账号开发而设计的一个框架#xff0c;jQuery WeUI的官网#xff1a;http://jqweui.com/
需求#xff1a;需要在微信公众号网页添加上传图片功能
技术选型#xff1a;实现上传图片功能可选百度的WebUploader、饿了么的Element和微信的jQuery WeUI…jQuery WeUI 是专为微信公众账号开发而设计的一个框架jQuery WeUI的官网http://jqweui.com/
需求需要在微信公众号网页添加上传图片功能
技术选型实现上传图片功能可选百度的WebUploader、饿了么的Element和微信的jQuery WeUIWebUploader的缺点是自定义UI困难自定义上传过程困难Element的缺点是Web 控件与手机端样式不符而jQuery WeUI专门为微信公众号做的框架基本不会出现问题使用起来比较简单。最后当然就选微信的jQuery WeUI
HTML部分
[html] view plaincopy!--图片上传-- div classweui-gallery idgallery span classweui-gallery__img idgalleryImg/span div classweui-gallery__opr a hrefjavascript: classweui-gallery__del i classweui-icon-delete weui-icon_gallery-delete/i /a /div /div div classweui-cells weui-cells_form div classweui-cell div classweui-cell__bd div classweui-uploader div classweui-uploader__hd p classweui-uploader__title图片上传/p /div div classweui-uploader__bd ul classweui-uploader__files iduploaderFiles /ul div classweui-uploader__input-box input iduploaderInput classweui-uploader__input zjxfjs_file typefile acceptimage/* multiple /div /div /div /div /div /div JS部分
[html] view plaincopyscript typetext/javascript src../js/mui.min.js/script script typetext/javascript src../js/jquery.min.js/script script src../js/jquery-weui.min.js/script script mui.init(); $(function() { var tmpl li classweui-uploader__file stylebackground-image:url(#url#)/li, $gallery $(#gallery), $galleryImg $(#galleryImg), $uploaderInput $(#uploaderInput), $uploaderFiles $(#uploaderFiles); $uploaderInput.on(change, function(e) { var src, url window.URL || window.webkitURL || window.mozURL, files e.target.files; for(var i 0, len files.length; i len; i) { var file files[i]; if(url) { src url.createObjectURL(file); } else { src e.target.result; } $uploaderFiles.append($(tmpl.replace(#url#, src))); } }); var index; //第几张图片 $uploaderFiles.on(click, li, function() { index $(this).index(); $galleryImg.attr(style, this.getAttribute(style)); $gallery.fadeIn(100); }); $gallery.on(click, function() { $gallery.fadeOut(100); }); //删除图片 $(.weui-gallery__del).click(function() { $uploaderFiles.find(li).eq(index).remove(); }); }); /script CSS和JS文件可以去官网下载
[html] view plaincopylink relstylesheet href../css/mui.min.css link relstylesheet href../css/weui.min.css/ link relstylesheet href../css/jquery-weui.min.css/ [html] view plaincopy script typetext/javascript src../js/mui.min.js/script script typetext/javascript src../js/jquery.min.js/script script src../js/jquery-weui.min.js/script 效果图点击加号上传图片点击图片可以进行预览、删除
