HTML5拖拽上传图片预览

参考博文1：http://blog.csdn.net/testcs_dn/article/details/8695532

参考博文2：http://justcoding.iteye.com/blog/2105760

1.文件API：（File API）

file类型的的表单控件选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的集合列表，代表所选择的所有文件。file对象继承于Blob对象，该对象表示二进制原始数据，提供slice方法，可以访问到字节内部的原始数据块。总之，file对象包含与FlieList对象，而file对象继承于Blob对象！

各对象的相关属性关系：

FileReader接口：
由图可知：HTML5还提供了FileReader接口：用于将文件读入内存，并读取文件中的数据。

var reader=new FileReader();

该接口总共有四个方法和六个事件：

• readAsBinaryString(file):读取文件为二进制
• readAsDataURL(file):读取文件DataURL
• readAsText(file,[encoding])：读取文件为文本
• about(none)：中断文件读取

---

• onabort：读取文件中断时触发
• onerror：读取文件出错时触发
• onloadstart：读取文件开始时触发
• onprogress：读取文件中时一直触发
• onload：读取文件成功时触发
• onloadend：读取文件结束时触发（成功和失败都会触发）

以上事件参数e有e.target.result或this.result指向读取的结果！

2.拖放API：

拖放属性：将需要拖放的元素的dragable属性设置为true（dragable=”true”）!img元素和a元素默认可以拖放。

拖放事件：（分为拖放元素事件和目标元素事件）

拖放元素事件：

• dragstart:拖拽前触发
• drag ,拖拽前、拖拽结束之间，连续触发
• dragend , 拖拽结束触发

目标元素事件：

• dragenter , 进入目标元素触发
• dragover ,进入目标、离开目标之间，连续触发
• dragleave , 离开目标元素触发
• drop , 在目标元素上释放鼠标触发

但是！需要注意的是：在目标元素中dragover和drop事件中要阻止默认行为（拒绝被拖放），否则拖放不能被实现！

---

DataTransfer对象&#