H5 图片拖拽前端实例

最新推荐文章于 2023-05-09 08:59:20 发布

qiufengwuxiu

最新推荐文章于 2023-05-09 08:59:20 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qiufengwuxiu/article/details/79570906

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.box_cs{
width:800px;
height:600px;
margin-bottom:20px;
margin-top:200px;
border:1px solid #aaaaaa;
text-align:center;
}
.drag_cs{
width:69px;
height:69px;
border:1px solid red;
background-color:green;
}
</style>
</head>
<body>

<div id='drag' class='drag_cs' draggable="true"></div>
<div id='box' class='box_cs'>
<span>请拖拽图片进入...</span>
</div>
<script>
var odrag=document.getElementById('drag');
var obox=document.getElementById('box');
var oSpan=obox.getElementsByTagName('span')[0];
//事件监听
obox.addEventListener('dragenter',drag,false);
obox.addEventListener('dragover',drag,false);
obox.addEventListener('dragleave',drag,false);
obox.addEventListener('drop',drag,false);
//模块化开发，组件开发
function drag(e){
   e.preventDefault();//阻止掉浏览器的默认事件
   switch(e.type){
     case 'dragenter':
        //console.log('dragstart');
       oSpan.style.display="none";
       break;
      case 'dragover':
        //console.log('dragover');
       break;
      case 'dragleave':
        //console.log('dragleave');
       oSpan.style.display="block";
       break;
       case 'drop':
          var imgFiles=e.dataTransfer.files;

          var imgFile
          for(var i=0;imgFile=imgFiles[i];i++){
              console.log(imgFile);
              var imgRead=new FileReader();//读取文件对象的信息
              imgRead.readAsDataURL(imgFiles[i]);//要读取的文件对象
              imgRead.οnlοad=function(){
              var aImg=new Image();
              aImg.src=this.result;
              obox.appendChild(aImg);
              }
              console.log(imgRead);
          }
        //console.log('drop');
       break;
   }
}

</script>
</body>
</html>

qiufengwuxiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 图片拖拽前端实例

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author"
复制链接

扫一扫