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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
详解使用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
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python实现简单遗传算法
2020/09/18 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
应届生会计电算化求职信
2013/10/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
元旦晚会开场白
2015/05/29 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python