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事件來訪問讀取結果