HTML5拖放与文件操作api，实现拖拽上传文件功能

一. 拖放API

1. 检测浏览器是否支持拖放功能：（IE10以下不支持HTML5拖放功能）（或者使用Modernizr特性检测库的Modernizr.draganddrop属性）

var div = document.createElement("div");
var support = ('draggable' in div) || ('ondrapstart' in div && 'ondrop' in div);
if(support){
    //浏览器支持HTML5拖放
}else{
    //使用UI库来实现拖放
}

 2, draggable="true"自定义样式

[draggable] {
    /*防止可拖曳元素的文字被选中*/
    -webkit-user-select :none;
    user-select :none;
    /*可以拖曳的元素通常鼠标是十字形*/
    cursor: pointer;
}

3,拖放事件（dragstart,dragenter,dragover,dragleave）（event对象中有dataTransfer属性获取额外的数据）（绕晕了）

　dragstart：元素开始被拖曳时触发；

　dragenter：处于拖曳状态的鼠标第一次进入被赋予该事件的元素时触发，（dragenter和dragleave可实现高亮或标记可释放的元素）

　dragleave ：处于拖曳状态的鼠标第一次离开被赋予该事件的元素时触发；

　dragover：处于拖曳状态的鼠标移动经过被赋予该事件的元素时触发；dragover会不断触发，要慎用（必须阻止dragover的默认行为（即不可drop））；

　当拖曳时被拖曳的元素也会触发一系列事件

　drag：在拖曳源触发，会不断地触发

　drop：在释放时，在释放元素上触发（拖动上传功能需要注意：1, drop事件会往父元素冒泡，因此需阻止它冒泡；2, 文件drop后会有下载的默认动作，因此也需要阻止默认行为；3, 阻止dragover的默认行为）

　dragend：拖曳源在拖曳操作结束后触发，不管拖曳操作成功与否

4, dataTransfer属性

　files：被拖曳的文件列表；

　types：拖曳数据的类型

　clearData(type)：删除给定类型的数据（如果没提供参数，所以类型都被删除）

　items：

 

二. 文件操作

1. 表单类型

<!--file表单选择文件，multiple属性可以选择多个文件-->
<input type = "file" id="file1" multiple>

2. file对象（通过拖曳的文件可以用dataTransfer的files来访问）

　　　name : 文件名，不包含路径信息

　　　type  ： 文件的MIME type

　　　size  : 文件大小，以byte为单位

3. FileReader对象

　　file文件对象只能访问到文件的基本信息，需要依靠FileReader对象访问文件的具体内容，FileReader在读取文件时是异步执行的，需要绑定其load事件来访问读取结果