zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    set, unordered_set模板类
    C/C++ Bug记录
    win10远程连接
    C/C++缓冲区刷新问题
    hihocoder1711 评论框排版[并查集+set]
    makefile
    Virtual Table
    粤语
    xilinx SDK开发 GPIO使用API总结
    基于zynq 7020的串口UART中断实验
  • 原文地址:https://www.cnblogs.com/li-sir/p/8309971.html
Copyright © 2011-2022 走看看