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"); 
   // 鼠标进入放置区时 
   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>

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

# js本地图片文件拖拽效果 # js图片文件拖拽 # js文件拖拽效果 # 原生js拖拽实现图形伸缩效果 # 完美实现js拖拽效果 return false用法详解 # 简单实现js拖拽效果 # JS实现简单拖拽效果 # 原生JS实现圆环拖拽效果 # js实现登录框鼠标拖拽效果 # js实现百度登录框鼠标拖拽效果 # 如何实现js拖拽效果及原理解析 # 拖动 # 拖拽 # 鼠标 # 将其 # 上传图片 # 上时 # 大家多多 # 拖放 # 方法如下 # 应该是 # 鼠标指针 # 区时 # height # px # dropBox # style # Document # width # text # center

返回目录在线咨询

上一篇：PHP教程：动态展示目录图片并从文件名提取名称
下一篇：佛山手机网站制作模板方案：响应式布局与用户体验优化指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求