jqWEUI样式,加图片上传到页面并预览
1、首先介绍下背景:项目最近更新,增加了些功能,其中用到了上传图片。由于是微信端而且用到了WEUI,去jqWEUI官网翻了翻,找到了一些挺实用的样式,但是没有对应的js组件。于是决定自己搞一个,由于功能比较简单所以可能考虑的不是很全面,程序吗,肯定会有bug,先把目前的样式贴出来:
效果如上,选择图片点击打开,预览出展示当前选择的图片。再次点击预览图片放大到全屏,可以选择删除。再重新上传。
jqWEUi版本的话全部引用的官网cdn
<!-- head 中 --> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> <!-- body 最后 --> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>代码如下:
//css部分 <style> ul,li{ list-style: none; margin:0; padding: 0; } ul{ width:100%; display: flex; justify-content: space-evenly; font-size: .5rem; } li{ text-align: center; } li>div{ display: inline-block; position: relative; } .hide{ display: none; } </style> //html <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">证件照片:</label></div> <div class="weui-cell__bd"> <ul> <li imgNum="1"> //此处的imgNum可以填写需要的字段 不一定是数字 //图片选择input <div class="weui-uploader__input-box"> <input class="weui-uploader__input" type="file" accept="image/*" multiple=""> </div> <div class="add_img weui-uploader__file hide"></div>//预览div <p>身份证照片</p>//文字介绍 </li> </ul> </div> //图片全屏预览 <div class="weui-gallery" id="modal"> <!--照片查看--> <span class="weui-gallery__img" ></span> <input type="hidden"> <div class="weui-gallery__opr"> <a href="javascript:" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a> </div> </div> </div> //js "use strict" /* * 设置微信端上传图片 * */ class getImgData{ constructor(){ this.imgData = {}; this.init(); } init(){ let that = this; //绑定选择 that.bingChange(); //绑定显示图片 that.viewImg(); //绑定删除图片 that.deleteImg(); //点击span时缩小 $("#modal span").click(()=>{ $("#modal").hide(); }) } bingChange(){ let that = this; $("input[type=file]").change(function(){ let reader = new FileReader(); reader.onload = evt => { that.setImg($(this).parents("li").attr("imgNum"),{ "base64":evt.target.result, "file":this.files[0] }); } reader.readAsDataURL(this.files[0]); }) } viewImg(){ $("div.add_img").click(function(){ $("#modal").show().find("span").css("backgroundImage",$(this).css("backgroundImage")).attr("imgNum",$(this).parents("li").attr("imgNum")); }) } deleteImg(){ let that = this; $(".weui-gallery__del").click(()=>{ $.confirm("您确定要删除该张照片吗", "确认删除?", function() { that.setImg($("#modal span").attr("imgNum")) $("#modal").hide(); $.toast("图片已经删除!"); }, function() { //取消操作 ); }) } setImg(imgNum,data){ // imgNum 每个li的imgNum标识 data 图片路径 if(data && data['base64']){ this.imgData["data_"+imgNum] = { 'base64' : data.base64 , 'file' : data.file }; $("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").hide().next(".add_img").show().css("backgroundImage",`url(${data['base64']})`); }else{ this.imgData["data_"+imgNum] = null; $("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").show().next(".add_img").css("backgroundImage","").hide(); } } getImg(){ //调用此方法可以拿到保存的图片数组 return this.imgData } } var imgData = new getImgData(); $(".submit").click(()=>{ console.log(imgData.getImg()) })