编程 Javascript

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

Posted in Javascript onJuly 18, 2017

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

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

完整代码：

<!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实现本地图片文件拖拽效果

- Author -

输出是最好的学习

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 变量作用域代码分析

Jun 26 Javascript

JavaScript 放大镜放大倍率和视窗尺寸

May 09 Javascript

javascript的console.log()用法小结

May 31 Javascript

推荐10个2014年最佳的jQuery视频插件

Nov 12 Javascript

JavaScript事件详细讲解

Jun 27 Javascript

老生常谈jquery中detach()和remove()的区别

Mar 02 Javascript

基于JavaScript实现前端数据多条件筛选功能

Aug 19 Javascript

JS基于递归实现网页版计算器的方法分析

Dec 20 Javascript

Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

Aug 09 jQuery

在vue中更换字体,本地存储字体非引用在线字体库的方法

Sep 28 Javascript

Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

Apr 26 Javascript

js 判断当前时间是否处于某个一个时间段内

Sep 19 Javascript

详解使用angularjs的ng-options时如何设置默认值(初始值)

Jul 18 #Javascript

js实现移动端导航点击自动滑动效果

Jul 18 #Javascript

JS实现点击Radio动态更新table数据

Jul 18 #Javascript

Angularjs的启动过程分析

Jul 18 #Javascript

关于javascript sort()排序你可能忽略的一点理解

Jul 18 #Javascript

jQuery扇形定时器插件pietimer使用方法详解

Jul 18 #jQuery

ES6中的rest参数与扩展运算符详解

Jul 18 #Javascript