js实现本地图片文件拖拽效果

2019-11-19 16:02:53

字体：大中小

来源：转载

供稿：网友

如何拖拽文件到指定位置，具体方法如下

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上代码

完整代码：

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title>  <style>   #dropBox{    width: 300px;    height: 300px;    border:1px solid red;    font-size: 40px;    text-align: center;    background: lightyellow;    background-repeat: no-repeat;    background-size: 100%;   }   #dropBox div{    margin:50px auto;    width: 140px;   }  </style> </head> <body>  <div id="dropBox">   <div>拖动你的图片到这里</div>  </div>  <script type="text/javascript">   var dropBox;   window.onload=function(){    dropBox = document.getElementById("dropBox");    // 鼠标进入放置区时    dropBox.ondragenter = ignoreDrag;    // 拖动文件的鼠标指针位置放置区之上时发生    dropBox.ondragover = ignoreDrag;    dropBox.ondrop = drop;   }   function ignoreDrag(e){    // 确保其他元素不会取得该事件    e.stopPropagation();    e.preventDefault();   }   function drop(e){    e.stopPropagation();    e.preventDefault();     // 取得拖放进来的文件    var data = e.dataTransfer;    var files = data.files;    // 将其传给真正的处理文件的函数        var file = files[0];    var reader = new FileReader();    reader.onload=function(e){     dropBox.style.backgroundImage = "url('"+e.target.result+"')";    }    reader.readAsDataURL(file);   }  </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：深入解析Vue 组件命名那些事

下一篇：详解使用angularjs的ng-options时如何设置默认值(初始值)