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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
You might like
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
php自动加载的两种实现方法
2010/06/21 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python随机生成身份证号码及校验功能
2018/12/04 Python
python实现连连看游戏
2020/02/14 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
实习护士自荐信
2014/06/21 职场文书
个人授权委托书模板
2014/09/14 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
信用卡工资证明范本
2015/06/19 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers