HTML5图片拖拽预览原理及实现.docVIP

HTML5图片拖拽预览原理及实现 一、前言 这两天恰好有一位同事问我怎样做一个图片预览功能。作为现代人的我们首先想到的当然是HTML5啦，其实HTML5做图片预览已经是一个老生常谈的问题了。我在这里就简单说说其中相关的一些东西，当然会附上我们的源码。在 HTML5 之前我们做图片预览主流做法有两种,第一种是通过 Flash 插件来做预览，第二种是 Ajax 实现的假预览，也就是说选择图片文件后，图片其实已经异步上传到服务器，服务器处理后返回图片路径，前端得到响应结果做出处理从而使图片显示在界面上。而有了 HTML5 之后就可以强烈鄙视上面两种做法了。 二、FileReader 要做图片预览功能，就不得不介绍一下 FileReader，顾名思义，它是用来读取文件的。当然新东西总会有一些顽固派排斥的，我们先来看看其兼容性如何（这不是本文讨论的重点）。 PC端兼容列表 移动端兼容列表 兼容性的话大家根据自己的需求参考一下上面的对照表，我们接着来看看 FileReader 的几个常用属性和常用方法 属性 FileReader.onload 读取完成 FileReader.result 读取结果 FileReader.error 读取错误 FileReader.readyState 前文档的状态 方法 FileReader.abort() 中断读取-无参数 FileReader.readAsArrayBuffer(file) 将文件读取为ArrayBuffer 对象 参数:文件 FileReader.readAsBinaryString(file) 将文件读取为二进制码 - 参数:文件 FileReader.readAsDataURL(file) 将文件读取为DataURL 参数:文件 FileReader.readAsText(file) 将文件读取为文本 参数:文件 废话不多说，我们通过代码来更直观点认识上面的属性和方法。回归到需求，做一个图片预览功能。首先理一理我们需要有的东西，第一要素当然是文件（文件选择器），第二当然是预览（容器）。 html 代码 (样式我顺手加上了) 复制代码 !DOCTYPE html html head titleCboyce－HTML5图片预览/title style type=text/css /*主容器*/ .container{ width: 90%; margin-top: 20px; } /*图片预览容器*/ .container .img-prev-container{ width: 200px; height: 100px; margin:10px auto; border:1px solid #ccc; } /*预览图片样式*/ .container .img-prev-container img{ width: 100%; height: 100%; } /style /head body div class=container div class=img-prev-container /div input type=file value=请选择图片 id=fileSelecter / /div /body /html 复制代码 接下来该 FileReader 出场了 复制代码 window.onload = function(){ //触发 change 事件 GetDomById(fileSelecter).onchange = function(event){ //获取文件对象 var file = event.target.files[0]; //创建reader对象 var reader = new FileReader(); //读取完成后触发 reader.onload = function(ev){ //获取图片的url var _img_src = ev.target.result; console.log(_img_src) //添加预览