html5拖拽原理,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 代码 (样式我顺手加上了)

Cboyce－HTML5图片预览

/*主容器*/.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%;

}