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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM