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