欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現本地圖片文件拖拽效果

 更新時間：2017年07月18日 15:08:40   作者：輸出是最好的學習  
這篇文章主要為大家詳細介紹了js實現本地圖片文件拖拽效果，拖拽文件到指定位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

在從本地上傳圖片的時候，如果使用拖拽效果，想想應該是更加的高大上，下面直接上代碼

完整代碼：

<!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"); 
   // 鼠標進入放置區(qū)時 
   dropBox.ondragenter = ignoreDrag; 
   // 拖動文件的鼠標指針位置放置區(qū)之上時發(fā)生 
   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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論