mui图片上传

作为一个后台开发人员、写这个真的是浪费不少脑细胞，虽然做出来了，但是也很麻烦，如果哪位大哥或者小妹妹那里有简单点的，我跪求！

相关的js  和 css  网盘地址：

链接：https://pan.baidu.com/s/1v-CNj0HiNoUOgF7gL8pMFg 
提取码：w3em 
 

首先展示一下效果图：

点击那个加号（注：这个 + （加号）是图标不是图片，不会弄的找前端的给弄）会添加一个图片，我这里是控制到了三张。

 

多的不说、上代码

 

 

点击图片后、右上角会出现一个X，就是删除图标，点击后会删除图片；

 HTML页面：

解释：这个<li>包括<span>加号图标和<input>，每次添加一张图片都会添加一个<li>标签

<div class="wtfk-box">
        <div class="wtfk-title">
            反馈图片
        </div>
        <ul class="mui-table-view mui-grid-view" id="father">
            <li class="mui-table-view-cell mui-media mui-col-xs-4" id="final">
                <span class="mui-icon iconfont icon-add add-img" id="imgModel"></span>
                <input type="file" id="fileElem" accept="image/*" style="display:none"
                       onchange="handleFiles(this.files)">
            </li>
        </ul>
    </div>
<button  class="mui-btn mui-btn-block mui-btn-primary" onclick="save()">保存</button>

页面JS：

mui.init()
    var lis;
    var uuid = null;
    var idcard;
    var imgModel = document.getElementById("imgModel");
    var fileElem = document.getElementById("fileElem");
    var arrayObj ={};

    //公共方法：判断图片的个数，显示或隐藏加号图标
    function pub() {
        lis = document.getElementById('father').getElementsByTagName('li').length;
        var final = document.getElementById("final");
        if (lis == 4) {
            final.style.display = "none";
        } else {
            final.style.display = "inline"
        }
    }

    //监听事件：点击加号图标，添加图片
    imgModel.addEventListener("tap", function (evt) {
        if (fileElem) {
            fileElem.click();
        }
        evt.preventDefault();
    }, false);

    //点击删除图标，删除图片
    mui(".mui-table-view").on("tap", ".delete-btn", function () {
        var Bid = this.getAttribute("id");
        var id = document.getElementById(Bid);
        var par = id.parentNode;
        var father = document.getElementById("father");
        father.removeChild(par);
        pub();
    })

    //添加图片
    function handleFiles(files) {
        if (files.length) {
            var file = files[0];
            var fileReader = new FileReader();
            fileReader.onload = function () {
                uuid = guid();
                lis = document.getElementById('father').getElementsByTagName('li').length;
                if (lis < 4) {
                    var father = document.getElementById("father");
                    var final = document.getElementById("final");
                    var li = document.createElement('li');
                    li.className = "mui-table-view-cell mui-media mui-col-xs-4 delete-ico";
                    li.id = 'id' + uuid;
                    li.innerHTML = '<img class="mui-media-object" id="img' + uuid + '" src="">' +
                        '<input type="file" id="input' + uuid + '" accept="image/!*" style="display:none" onchange="handleFiles(this.files)">' +
                        '<span class="mui-icon iconfont icon-delete delete-btn" id="d' + uuid + '"></span>';
                    father.appendChild(li);
                    var ids = document.getElementById('id' + uuid);
                    father.insertBefore(ids, final);

                    document.getElementById('img' + uuid).src = fileReader.result;
                    idcard = fileReader.result;
                    pub();
                } else {
                    mui.toast('亲、照片只能上传3张！');
                }

            };
            fileReader.readAsDataURL(file);
        }
    }

    //生成唯一ID
    function guid() {
        return Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36);
    }
    //保存信息
    function save() {
        var len=document.getElementById('father').getElementsByTagName('img').length;
        var content = document.getElementById("contents").value;
        for (var i=0;i<len;i++){
            var url = document.getElementById('father').getElementsByTagName('img')[i].src
            arrayObj["url"+(i+1)]=url;

        }
        mui.ajax('访问地址',{
            data:{
                content:content,
                arrayObj:JSON.stringify(arrayObj)
            },
            type:'post',
            timeout:10000,
            headers:{'Content-Type':'application/json'},
            success:function (data) {
                if(data.code==0){
                    mui.toast("保存成功");
                }
            },
            error:function(xhr,type,errorThrown){
                console.log(type);
            }

        })
    }

后台接受Controller:

@RequestMapping(value = "/add",method = RequestMethod.POST)
    @ResponseBody
    public AjaxCommonObject addWtfk(@RequestBody Map<String,String> map){
        AjaxCommonObject ajaxCommonObject = new AjaxCommonObject();
        try {
            System.out.println(map.get("content"));

            JSONObject j = JSONObject.parseObject(map.get("arrayObj"));
            Set<String> jsonSet = j.keySet();
            Iterator<String> iterator = jsonSet.iterator();
            while (iterator.hasNext()){
                //通过迭代器可以取到外部json的key
                String json = iterator.next();
                //取得内部json字符串
                String string = j.getString(json);
                System.out.println(string);
            }
        } catch (BizCommonException e) {
            return new AjaxCommonObject(e);
        }
        return ajaxCommonObject;
    }