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

最新推荐文章于 2022-12-25 19:01:17 发布

冰雪为融

最新推荐文章于 2022-12-25 19:01:17 发布

阅读量1.1k

点赞数

分类专栏： js练习文章标签： js draggable

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79747650

版权

js练习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

主要还是对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>

冰雪为融

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
拖拽上传图片，及删除小实例

主要还是对draggable的练习，因为之前遇到了点小问题，所以今天才整理，对draggable不太了解的请点击深入理解js中的draggable，该有的解释已经在注释中了，所以此处不再过多解释，嗯、直接上代码&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content...
复制链接

扫一扫