老师，看我看我。。有两个问题麻烦老师解答一下，谢谢老师！

来源：4-2 选择题

不安分的魔菇

2019-01-12 19:41:55

课下找了一个小练习，关于H5本地图片拖拽上传。但是有两个问题，请老师解答一下，谢谢！

我想实现，当我图片拖进去但是我没放，又拖出来的时候还是显示提醒：“图片放在这里”。就是当窗口中没有图片的时候，还是显示文字。添加了ondragleave事件，但是快速拖拽进div内的话，会导致div内的文字交替闪烁，慢慢将图片拖拽进去则不会，该怎么解决？

还有，阻止浏览器在当前窗口中打开本地图片事件有时候会失败。图片拖进html页面中还是会出现刷新当前窗口在当前窗口打开。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html5拖拽事件</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        #box{
            width: 300px;
            min-height: 300px;
            border: 2px solid #fce;
            margin: 20px auto 0;
        }
        span{
            width: 300px;
            height: 300px;
            color: #c53;
            font-size: 20px;
            text-align: center;
            display: block;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div id="box"><span>嗨，图片放这里 o！</span></div>
    <script type="text/javascript">
        document.ondragover=function(e){
            e.preventDefault();
        }
        document.ondrop=function(e){
            //阻止浏览器在新窗口中打开本地图片
            e.preventDefault();
        }
 
        //目标对象事件
        // var oSpan=document.getElementById("box").getElementsByTagName("span");
        var oSpan=document.querySelector("#box span");
        //拖拽模块
        box.ondragover=function(e){
            e.preventDefault();
            oSpan.style.display="none";
            console.log("over");
        }
        box.ondragleave=function(e){
            e.preventDefault();
            oSpan.style.display="block";
            console.log("leave");
        }
        box.ondrop=function(e){
            e.preventDefault();
            var imgFiles=e.dataTransfer.files;
            for(var i=0;i<imgFiles.length;i++){
                var imgRead=new FileReader();//文件读取器
                imgRead.readAsDataURL(imgFiles[i]);//要读取的文件对象
                imgRead.onload=function(){
                    //console.log(this.result);
                    console.log(i+"张图片的数据读取完成");
                    var img=new Image();
                    img.src=this.result;
                    img.style.width="100px";
                    img.style.height="100px";
                    box.appendChild(img);
                }
            }
        }
        //ondragleave事件会导致div内的文字交替闪烁；且导致阻止浏览器在新窗口打开本地图片失败。该怎么解决？
    </script>
</body>
</html>

写回答

1回答