类微信多图片上传

前端入坑纪 30

今天项目中碰到如题的效果。讲真，我的内心是拒绝的。
原因还是input file 文件上传 这个按钮的锅。

一直到目前为止，都没搜索和咨询到，如何取得input file 的取消事件。就是用户点了上传文件，选着选着，最后点了取消。貌似只能间接的通过onchange 来判定value，然后确定是否为空，也就是取消的状态。

可是，这样得第一次点了，它取消了。第二次再点，才好识别出onchange是空的。简单说就是要点两次，这样的话，并不适合我目前这个项目的需求。

如果这段文字让你看得云里雾里，那就请直接看下面的项目正文吧！

上代码才是真理，其他都是浮云！

真实项目效果图

OK，first things first！项目链接

HTML 结构

    <div class="infoEdt">
        <div class="clear">
            <label class="fl">姓名</label><input type="text" class="fr" placeholder="冯燕">
        </div>
        <div class="clear" style="border:none">
            <label class="fl">联系方式</label><input type="text" class="fr" placeholder="135662454777">
        </div>
    </div>
    <div class="imgUps">
        <p class="clear">
            <span class="fl">图片上传</span><span class="fr" style="color:#999">最多上传10张图</span>
        </p>
        <form id="formImg">
            <section id="divElesWrp" class="clear">
                <a id="addPic" class="fl" href="javascript:;"></a>
            </section>
            <a class="upsBtn" href="javascript:;" id="bmBtn">确认报名</a>
        </form>
    </div>

请忽略上面的input框，和本文的效果无关，您看看就好。

CSS 结构

        /*rest style*/
        
        body {
            padding: 0;
            margin: 0;
            background-color: #f4f4f4;
            max-width: 640px;
            margin: 0 auto;
        }
        
        p {
            padding: 0;
            margin: 0;
        }
        
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #525252;
        }
        
        img {
            vertical-align: middle;
        }
        
        input,
        button {
            outline: none;
            background: none;
            border: none;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        .clear::after {
            display: block;
            content: "";
            clear: both;
        }
        /*page style*/
        
        .infoEdt {
            background-color: #fff;
            padding: 0 2%;
            margin-bottom: 6px;
        }
        
        .imgUps section {
            background-color: #fff;
            padding: 2% 1% 6%;
            width: 98%;
        }
        
        .imgUps p {
            padding: 0 2%;
            line-height: 40px;
            background-color: #fff;
        }
        
        .infoEdt div {
            font-size: 14px;
            line-height: 45px;
            color: #000;
            border-bottom: 1px solid #dfdfdf
        }
        
        .infoEdt input {
            line-height: 45px;
            text-align: right
        }
        
        .imgUps span {
            font-size: 15px;
            color: #000;
        }
        
        .imgUps form div {
            position: relative;
            width: 0;
            height: 0;
            background-color: #f3f3f3;
            padding: 12%;
            margin: 1% .5%;
            float: left;
            background-size: 100% auto;
            background-position: center center;
            background-repeat: no-repeat
        }
        
        .imgUps form div>em {
            display: block;
            position: absolute;
            border-radius: 50%;
            height: 26px;
            width: 26px;
            font-style: normal;
            color: #fff;
            line-height: 30px;
            text-align: center;
            top: 0;
            right: 0;
            background-color: #f3557b;
            background-image: url('wrap/img/loginBack.png');
            background-size: 47% auto;
            background-position: center center;
            background-repeat: no-repeat
        }
        
        #addPic {
            display: block;
            height: 0;
            width: 0;
            padding: 12%;
            margin: 1% .5%;
            float: left;
            background-image: url('wrap/img/addPic.png');
            background-size: 100% 100%;
            background-position: center center;
            background-repeat: no-repeat
        }
        
        .upsBtn {
            display: block;
            background-image: linear-gradient(-132deg, #f3557b 0%, #fa7157 100%);
            border-radius: 9px;
            width: 92%;
            text-align: center;
            margin: 6% 4%;
            line-height: 45px;
            font-size: 18px;
            color: #ffffff;
        }

添加的图片是会显示为 .imgUps 里 form 内的 div 的背景，每个div是浮动布局的。同时，添加的按钮#addPic也是浮动的。点完后自动生成的input，故意注释了隐藏，以便后台查看。

JS 结构

        var oUpBtn = document.getElementById("addPic");
        var oform = document.getElementById("formImg");
        var odWrp = document.getElementById("divElesWrp");
        var obmBtn = document.getElementById("bmBtn");
        var i = 0;// 为新添加的元素加id时，自动加上i


        // 这里的原理在 11篇《图片上传之在线预览》讲过，基本类似，就不赘述了
        function imgChange(ths) {
            var oinpt = ths;
            var freader = new FileReader();
            var ofile = oinpt.files[0];
            if (ofile) {
                freader.readAsDataURL(ofile);
                freader.onload = function() {
                    var newNode = document.createElement("div");
                    var spanEm = document.createElement("em");
                    spanEm.setAttribute("onclick", "delBoth(this)")
                    newNode.appendChild(spanEm);
                    newNode.setAttribute("id", oinpt.id + "d");
                    odWrp.insertBefore(newNode, oUpBtn);
                    newNode.style.backgroundImage = "url(" + this.result + ")";
                }
            }
        }


         // 点击了预览图的X按钮后，删除对应的input file 和 该预览图。
        function delBoth(ths) {
            var oEm = ths;
            var strs = oEm.parentNode.getAttribute("id"); // 获取预览图的id
            var newStrs = strs.substring(0, strs.length - 1); // 删除末尾的字符，就是input file 的id
            odWrp.removeChild(oEm.parentNode);
            oform.removeChild(document.getElementById(newStrs));
        }


        // 删除空的input file的按钮，因为用户可能点击了上传文件，最后有可能取消了。那生成的input file却依旧在，所以需要这个
        function clearEnpt(oinpt) {
            if (oinpt.value == "") {
                oform.removeChild(oinpt);
            }
        }


         // 每次点击addPic按钮时的操作
        oUpBtn.onclick = function() {
            var mInputs = oform.getElementsByTagName("input");
            
             // 创建新的input file元素并添加
            var eleInpt = document.createElement("input");
            eleInpt.type = "file";
            eleInpt.id = "file" + i;
            eleInpt.name = "imgs" + i;
            // eleInpt.setAttribute("hidden", "hidden");
            eleInpt.setAttribute("onchange", "imgChange(this)");
            oform.appendChild(eleInpt);
            i++;
            
             // 删除空的input file，除最后一个（因为它是我们上面才创建的，所以这里有坑.....）
            for (var j = 0; j < mInputs.length - 1; j++) {
                clearEnpt(mInputs[j])
            }

            // 200毫秒后模拟input file 的点击效果
            setTimeout(function() {
                eleInpt.click();
            }, 200);

        }

基本备注已经添加完毕，感兴趣的小伙伴可以研究下！那个最后一个input 如果为空，目前有两种法子，要么最后点击“确认报名”时，再清除一遍空的input file。或者直接让后端，过滤掉空的。

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！