drag-and-drop实现图片浏览器预览


Posted in Javascript onAugust 06, 2015

今天刚试过chrome的drag and drop API,它能非常简单的将本地的图片放到浏览器中进行预览。试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情,你的浏览器试图打开一个新的页面并加载这个图片。现在我不想浏览器这样帮我处理图片,我希望我拖拽的图片能立即放到我预先规定的位置并迅速回显,这就需要javascript中event对象的两个函数stopPropergation()和preventDefault()。前者将会阻止事件的冒泡,后者会阻止浏览器默认的行为。

这里我们定义一个ignoreDrag函数,用以实现上述功能:
Html代码 

var ignoreDrag = function(e){ 
     e.originalEvent.stopPropagation(); 
     e.originalEvent.preventDefault(); 
     }

然后利用jquery绑定事件
Html代码 

$('#drop') 
.bind('dragenter',dragenter) 
.bind('dragover',dragover) 
.bind('drop',drop);

这里最好用jquery去绑定事件,因为jquery帮我们把event对象做了很好的封装,这样我们才能毫无顾忌的使用stopPropagation和preventDefault函数。
同时定义dragover,dragenter事件函数

Html代码 

var dragover = function(e){ 
     ignoreDrag(e); 
   } 
   var dragenter = function(e){ 
     ignoreDrag(e); 
   }

这个一定要定义,否则仍然无法阻止浏览器的默认行为。

最后定义drop函数,也就是当我们把图片放到指定位置时触发的函数
Html代码 

var drop = function(e){ 
    ignoreDrag(e); 
    var dt = e.originalEvent.dataTransfer; 
    var files = dt.files; 
    var fr = new FileReader(); 
    fr.onload = function(e){ 
      var image = new Image(); 
      image.src = e.target.result; 
      $('#drop').append(image) 
    } 
    fr.readAsDataURL(files[0]); 
   }

这个函数是整个功能的关键,这里用到了html5的一些特性,dataTransfer和FileReader。
dataTransfer是drop事件的event参数的一个属性,它包含了droped文件的一些信息,通过dataTransfer的files属性可以获得文件的数组,数组中的元素就是droped文件对象,可以通过name,type,size分别获取文件的名字,类型和大小;文件的内容就要用FileReader来读取,FileReader对象的实例拥有4个方法,其中3个用以读取文件,另一个用来中断读取,下面这张表格列出了这些方法以及他们的功能,注意,不论读取成功与否,函数都不会返回读取的结果,结果存取在result属性中:

 readAsText: 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

readAsBinaryString: 它将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。

readAsDataURL: 这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URI,Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader还包含一系列的事件模型,如下表所示: 

drag-and-drop实现图片浏览器预览

这里额外在介绍一下drag-and-drop的事件,表格如下:

 

回到正题,通过FileReader的readAsDataURL函数读取图片,同时在FileReader对象上定义onload函数,当图片加载完毕,通过event.target.result获取文件的base64编码的内容,上一个博客我已经讲过data类型的url可以直接写在img标签的src里面,浏览器就会解析,而不用从外部加载,通过这个特性,将获取到的图片内容赋给img标签的src,并将image对象添加到指定区域里,就可以实现所需的功能。

Html代码 

<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
  <style type="text/css"> 
   #drop{ 
    width:500px; 
    height:300px; 
    border:1px solid grey; 
    line-height:300px; 
    text-align:center; 
    overflow:auto; 
   } 
  </style> 
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
  <script type="text/javascript"> 
   var ignoreDrag = function(e){ 
     e.originalEvent.stopPropagation(); 
     e.originalEvent.preventDefault(); 
     } 
   var dragover = function(e){ 
     ignoreDrag(e); 
   } 
   var dragenter = function(e){ 
     ignoreDrag(e); 
   } 
   var drop = function(e){ 
    ignoreDrag(e); 
    var dt = e.originalEvent.dataTransfer; 
    var files = dt.files; 
    var fr = new FileReader(); 
    fr.onload = function(e){ 
      var image = new Image(); 
      image.src = e.target.result; 
      $('#drop').append(image) 
    } 
    fr.readAsDataURL(files[0]); 
   } 
   $( function(){ 
     $('#drop').bind('dragenter',dragenter).bind('dragover',dragover).bind('drop',drop); 
   }); 
  </script> 
 </head> 
 <body> 
  <div id="drop" > 
  请将图片放到这里! 
  </div> 
 </body> 
</html>

以上内容就是使用drag-and-drop实现图片浏览器预览的全部内容,希望大家喜欢。

Javascript 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 #Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 #Javascript
js实现网页抽奖实例
Aug 05 #Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
用python生成1000个txt文件的方法
2018/10/25 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
判断单链表中是否存在环
2012/07/16 面试题
小学生新年寄语
2014/04/03 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
超市员工管理制度
2015/08/06 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
MySQL创建管理子分区
2022/04/13 MySQL