拖拽上传图片，及删除小实例

小灰灰 2022-05-28 04:51 226阅读 0赞

主要还是对draggable的练习，因为之前遇到了点小问题，所以今天才整理，对draggable不太了解的请点击深入理解js中的draggable，该有的解释已经在注释中了，所以此处不再过多解释，嗯、直接上代码

<!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            *{padding:0px; margin:0px;}
            ul{width:1000px; margin:30px auto;}
            li{list-style:none; width:100px; height:60px; background:yellow; margin:20px; float:left;}
            li img{width:100px; height:60px;}
            #div1{ width:200px; height:200px;text-align:center; line-height:200px; background:red; position:absolute; top:400px; left:300px;}
            #rem{width:50px; height:50px; color:#fff; background:#000; font-size:10px; text-align:center; line-height:50px; border:1px solid #000; border-radius:50%; position:fixed; bottom:20px; left:20px;}
        </style>
        <script>
            window.onload = function(){
                var oUl = document.getElementById('ul1');
                var oDiv = document.getElementById('div1');
                var oRe = document.getElementById('rem');
                var len = 0;
                oDiv.ondragenter = function(){
                    this.style.background = 'green';
                    this.innerHTML = '可以释放啦';
                }
                oDiv.ondragover = function(ev){
                    ev.preventDefault();
                }
                oDiv.ondragleave = function(){
                    this.style.background = 'red';
                    this.innerHTML = '将文件拖拽到此区域'
                }
                oDiv.ondrop = function(ev){
    
                    var ev = ev||event;
                    ev.preventDefault();
                    var fs = ev.dataTransfer.files;//files获取外部拖拽的文件，返回一个filesList列表
                    for(var i=0; i<fs.length; i++){
    
                        if(fs[i].type.indexOf('image')!=-1){
    
                            var fd = new FileReader();
                            fd.readAsDataURL(fs[i]);//参数为要读取的文件对象，将文件读取为DataUrl
                            fd.οnlοad= function(){//当读取文件成功完成的时候触发此事件
                                var oLi = document.createElement('li');
                                var oImg = document.createElement('img');
                                oImg.src = this.result;//this.result，获取读取的文件数据
                                oLi.appendChild(oImg);
                                oUl.appendChild(oLi);
    
    
                                var aLi = oUl.getElementsByTagName('li');
    
                                len = aLi.length;
    
                                for(var i=0; i<len;i++){
                                    aLi[i].index = i;
                                    aLi[i].ondragstart = function(ev){
                                        var ev = ev||event;
                                        ev.dataTransfer.setData('name',this.index);
                                        this.style.background = 'blue';
                                    };
    
                                }
    
                                oRe.ondragover = function(ev){
                                    var ev = ev||event;
                                    ev.preventDefault();
                                }
                                oRe.ondrop = function(ev){
                                    var ev = ev||event;
                                    ev.preventDefault();
                                    //console.log(ev.dataTransfer.getData('name'));
                                    oUl.removeChild(aLi[ev.dataTransfer.getData('name')]);
                                    for(var i=0; i<aLi.length; i++){
                                        aLi[i].index = i;
                                    }
    
                                }
    
    
                            }
                        }else{
                            alert('亲，请上传图片类型');
                        }
                    }
    
                    this.innerHTML = '将文件拖拽到此处';
                    this.style.background= 'red';
    
                }
    
            };
        </script>
    </head>
    
    <body>
    <ul id="ul1">
    
    </ul>
    <div id="div1">将文件拖到此区域
    </div>
    <div id="rem">删除图片</div>
    </body>
    </html>