jqWEUI图片上传

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())
        })