`

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

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

这里我们定义一个ignoreDrag函数,用以实现上述功能:
var ignoreDrag = function(e){
	     e.originalEvent.stopPropagation();
		 e.originalEvent.preventDefault();
	     }

然后利用jquery绑定事件
$('#drop')
.bind('dragenter',dragenter)
.bind('dragover',dragover)
.bind('drop',drop);

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

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

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

最后定义drop函数,也就是当我们把图片放到指定位置时触发的函数
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的事件,表格如下:



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

最后附上全部代码:
<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>

  • 大小: 4.2 KB
  • 大小: 4.6 KB
  • 大小: 14 KB
分享到:
评论

相关推荐

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

    【拖放(Drag-and-Drop)技术在图片预览中的应用】 拖放(Drag-and-Drop)技术是Web开发中的一个重要特性,它允许用户通过鼠标或其他输入设备将元素从一处拖动到另一处,常用于文件上传、内容移动等场景。在Chrome...

    drag-n-drop:学习如何在js中拖放

    在JavaScript中,拖放(Drag and Drop)功能是一种常见的用户交互技术,允许用户通过鼠标或触摸设备将元素从一个位置拖动到另一个位置。这种功能广泛应用于文件管理、界面组件排序、图片上传等多个场景。本教程将...

    drag-and-drop-file-uploader:使用 php 拖放文件上传器

    在提供的“drag-and-drop-file-uploader-master”压缩包中,应该包含了完整的源代码,包括HTML、CSS、JavaScript和PHP文件,以及可能的示例图片或文档。通过查看和分析这些文件,你可以更深入地了解整个系统的实现...

    若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)

    综上所述,"若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)"是一个结合了Vue.js、HTML5 File API、drag-and-drop API、canvas技术和可能的云存储服务的复杂功能。通过这些技术的巧妙运用,开发者...

    react-fileupload:react版本的图片上传,支持拖拽和删除,用来复习Drag,Drop,File,XHR2

    在图片上传组件中,通过监听`dragstart`、`dragenter`、`dragleave`、`dragover`和`drop`等事件,可以实现文件的拖放上传功能。 4. **XHR2 (XMLHttpRequest Level 2)** 和 **Fetch API**: XHR2是Ajax的升级版,...

    上传图片预览效果示例程序

    同时,也可以监听拖放事件(drag and drop),实现更高级的图片上传预览功能。 6. 图片尺寸优化:为了提高用户体验和加载速度,预览时可能会对图片进行缩放,这可以通过JavaScript的canvas元素来实现。先将图片绘制...

    由html5实现的文件上传预览功能--zyUpload

    在本项目"由html5实现的文件上传预览功能--zyUpload"中,主要涉及了HTML5的File API、拖放API(Drag and Drop API)以及JavaScript的交互功能,这些技术共同构建了一个用户友好的图片上传预览系统。 1. **File API*...

    Html5DragAndDrop

    这个特性结合JavaScript可以创建出许多交互式的应用,比如文件上传、图片预览、数据交换等。下面将详细介绍HTML5 Drag and Drop以及与JavaScript相关的知识点。 1. **HTML5 Drag and Drop API** HTML5引入了一套...

    dom-drag 今天学了学js里面的拖拉

    虽然现代浏览器广泛支持Drag and Drop API,但确保跨浏览器兼容性仍然很重要。需要检查并适配不支持此API的浏览器。 6. **示例代码** `demo.html`和`ex{2,4,5}.html`可能是实现拖放功能的实例代码,通过查看这些...

    H5实现多图片预览上传,可点击可拖拽

    本文将深入探讨如何使用H5实现多图片预览、上传功能,并支持点击和拖拽操作,同时保持界面的美观和接口的简洁性。在图片上传控件的设计中,用户体验和功能实现是两个关键要素。 首先,我们要了解HTML5引入的新特性...

    页面浏览客户端自己的图片,不上传到服务器

    6. **用户体验优化**: 为了避免用户每次都要手动选择文件,可以考虑使用拖放(Drag and Drop)功能,让用户可以直接从文件管理器拖动图片到网页指定区域,同样利用File API进行处理。 7. **错误处理**: 在实现过程中...

    图片上传和预览

    在"图片预览兼容性问题解决.html"这个文件中,开发者可能已经通过注释详细解释了如何在不同浏览器环境下实现这一功能。通过学习这个源码,可以深入理解如何处理浏览器兼容性问题,提升网页应用的用户体验。

    HTML5拖拽上传图片预览提交代码.zip

    首先,HTML5的拖放API(Drag and Drop API)允许用户直接从桌面拖动文件到浏览器页面上,极大地简化了文件上传的过程。这个特性涉及到`dragstart`、`dragenter`、`dragover`、`dragleave`、`drop`等事件,通过监听...

    uppy下一代浏览器Web文件上传组件

    2. **实时预览**:支持图片和视频的实时预览,增强用户交互体验。 3. **自定义界面**:uppy 提供可定制的UI组件,开发者可以根据自己的设计需求调整外观。 4. **插件化设计**:通过插件系统,uppy 可以轻松扩展以...

    上传图片预览

    "上传图片预览"必须考虑不同浏览器的兼容性,特别是老旧的IE浏览器以及现代的火狐和谷歌浏览器。IE浏览器通常需要特殊的处理方式,而火狐和Chrome支持更多的现代API,使得实现预览更为便捷。 2. **HTML5 File API*...

    Ext相册实现文件拖拽,实时上传进度,本地预览

    总结,实现"Ext相册实现文件拖拽,实时上传进度,本地预览"的功能,需要结合EXT4的前端组件能力、HTML5的File API和Drag and Drop API,以及Servlet或Struts2在后端进行文件处理。这样的组合不仅提升了用户体验,也...

    IE10兼容性白皮书

    - 包括但不限于拖放 (Drag-and-Drop) 功能,进一步增强了 Web 应用的交互性和实用性。 #### 二、IE10支持的新HTML5特性 **1. Application Cache:** - **定义:**用于缓存 Web 应用资源,支持离线访问。 - **优势...

    多文件预览上传

    这个功能主要基于HTML5的新特性,特别是File API和Drag and Drop API,使得在浏览器端实现这样的功能成为可能,而无需依赖Flash或其他插件。 **HTML5 File API** File API是HTML5引入的一个强大特性,它提供了一套...

Global site tag (gtag.js) - Google Analytics