欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-24 09:55:13
如何拖拽文件到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上代码 完整代码:

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

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

完整代码:

<!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> 

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