亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實現(xiàn)本地圖片文件拖拽效果

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

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

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

完整代碼：

<!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"); 
   // 鼠標(biāo)進(jìn)入放置區(qū)時 
   dropBox.ondragenter = ignoreDrag; 
   // 拖動文件的鼠標(biāo)指針位置放置區(qū)之上時發(fā)生 
   dropBox.ondragover = ignoreDrag; 
   dropBox.ondrop = drop; 
  } 
  function ignoreDrag(e){ 
   // 確保其他元素不會取得該事件 
   e.stopPropagation(); 
   e.preventDefault(); 
  } 
  function drop(e){ 
   e.stopPropagation(); 
   e.preventDefault(); 
 
   // 取得拖放進(jìn)來的文件 
   var data = e.dataTransfer; 
   var files = data.files; 
   // 將其傳給真正的處理文件的函數(shù) 
    
   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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論