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 相关文章推荐
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
js实现上传图片预览方法
Oct 25 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
js new Date()实例测试
Oct 31 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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
咖啡与牛奶
2021/03/03 冲泡冲煮
php上传图片存入数据库示例分享
2014/03/11 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
从vue源码看props的用法
2019/01/09 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
python列表操作实例
2015/01/14 Python
Python回调函数用法实例详解
2015/07/02 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python获取代理IP的实例分享
2018/05/07 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python元组常见操作示例
2019/02/19 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python魔术方法专题
2020/06/19 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
公司成立感言
2014/01/11 职场文书
超市5.1促销活动
2014/01/15 职场文书
科研课题实施方案
2014/03/18 职场文书
房屋租赁意向书
2014/04/01 职场文书
关于安全的演讲稿
2014/05/09 职场文书
病房管理制度范本
2015/08/06 职场文书
家长会后的感想
2015/08/11 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python