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 相关文章推荐
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
smarty简单入门实例
2014/11/28 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python高级用法总结
2018/05/26 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
opencv实现简单人脸识别
2021/02/19 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python运行DLL文件的方法
2020/01/17 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
学院领导推荐信
2013/10/30 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
工作所在部门证明
2014/09/21 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang