1.文件API：（File API）
file类型的的表单控件选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的集合列表，代表所选择的所有文件。file对象继承于Blob对象，该对象表示二进制原始数据，提供slice方法，可以访问到字节内部的原始数据块。总之，file对象包含与FlieList对象，而file对象继承于Blob对象！
各对象的相关属性关系：
FileReader接口： 由图可知：HTML5还提供了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事件中要阻止默认行为（拒绝被拖放），否则拖放不能被实现！
--------------------------------------------------------------------------------
属性。
3个属性： //示例：
•effectAllowed : 设置光标样式(none,copy,copyLink,copyMove,link,linkMove,move,all 和 uninitialized)
•effectAllowed：设置拖放操作的视觉效果
•types：存入数据的种类，字符串的伪数组
•files：获取外部拖拽的文件，返回一个fileList列表，filesList下有个type属性，返回文件的类型
4个方法：
•setData() : 设置数据 key和value(必须是字符串)
•getData() : 获取数据，根据key值，获取对应的value
•clearData()：清除DataTransfer对象存放的数据
•setDragImage(imageUrl,log x,long y)：用img元素来设置拖放图标
target.addEventListener('dragstart',function(e){
var fs = e.dataTransfer.files;//获取拖放的文件对象列表FlieList对象
var dt=e.dataTransfer;//作为拖放事件的dataTransfer属性
dt.effectAllowed='copy';
dt.setData('text/plain','hello');
dt.setDragImage(dragIcom,-10,-10);
});
3.拖拽上传图片预览：
思路： 1.熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为 2.拖拽放置后，获取到文件对象集合：e.dataTransfer.files 3.循环该集合中的每个文件对象，判断文件类型以及文件大小，是指定类型则进行相应的操作 4.读取文件信息对象：new FileReader()，它有读取文件对象为DataUrl等方法：readAsDataURL(文件对象)、读取成功之后触发的事件：onload事件等，this.result为读取到的数据 5.在FileReader对象中的几个事件中进行相应的逻辑处理
HTML：
