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

發(fā)布時(shí)間：2020-10-10 21:37:09 來源：腳本之家閱讀：111 作者：輸出是最好的學(xué)習(xí) 欄目：web開發(fā)

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

在從本地上傳圖片的時(shí)候，如果使用拖拽效果，想想應(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>拖動(dòng)你的圖片到這里</div> 
 </div> 
 <script type="text/javascript"> 
  var dropBox; 
  window.onload=function(){ 
   dropBox = document.getElementById("dropBox"); 
   // 鼠標(biāo)進(jìn)入放置區(qū)時(shí) 
   dropBox.ondragenter = ignoreDrag; 
   // 拖動(dòng)文件的鼠標(biāo)指針位置放置區(qū)之上時(shí)發(fā)生 
   dropBox.ondragover = ignoreDrag; 
   dropBox.ondrop = drop; 
  } 
  function ignoreDrag(e){ 
   // 確保其他元素不會(huì)取得該事件 
   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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽