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 相关文章推荐
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
Vue实现商品分类菜单数量提示功能
Jul 26 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
使用symfony命令创建项目的方法
2016/03/17 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
Python入门学习之字符串与比较运算符
2015/10/12 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
django缓存配置的几种方法详解
2018/07/16 Python
python实现图片压缩代码实例
2019/08/12 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
法学函授自我鉴定
2014/02/06 职场文书
企业金融服务方案
2014/06/03 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
建议书的格式及范文
2015/09/14 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers