input图片上传并显示查看判断图片类型

有一个问题:上传一次在上传一次关闭按钮会出现两次,关闭之后还有一个(改好了可以告诉我我在修正过来)

 

<div id="box">
                                <div class="img-d">
                                    <span class="up-s"></span>
                                    <input type="file" id="up" multiple name="files">
                                </div>
                                <button type="submit">确认提交</button>
                            </div>
                            <script>
                                // span的点击事件
                                var addBtn = document.querySelector('.up-s');
                                addBtn.addEventListener('click',function () {
                                    document.querySelector('#up').value = null;
                                    document.querySelector('#up').click();
                                    return false;
                                },false);
                                // 处理input点击之后的change事件
                                document.getElementById("up").addEventListener("change",function(e){
                                    var files =this.files;
                                    var fileType = document.getElementById("up").value;
                                    if(!/.(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType))
                                    {
                                        alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                                        return false;
                                    }
                                    var reader =new FileReader();
                                    reader.readAsDataURL(files[0]);
                                    reader.onload =function(e){
                                        var dx =(e.total/1024)/1024;
                                        if(dx>=1){
                                            alert("文件大小大于2M");
                                            return false;
                                        }
                                        var result =this.result;//这里就是转化之后的DataURL
                                        addBtn.style.backgroundImage = "url("+result+")";
                                        var rem =document.createElement("i");
                                        rem.setAttribute("class","rems");
                                        rem.innerHTML ="x";
                                        document.querySelector(".img-d").appendChild(rem);
                                        rem.addEventListener('click',function () {
                                            //this.style.remove ="none";
                                            rem.parentNode.removeChild(rem);
                                            addBtn.style.backgroundImage = "url(images/xztpp.png)";
                                        });
                                    };
                                })
                            </script>
原文地址:https://www.cnblogs.com/li-sir/p/8309971.html