H5 FileReader+drag+ajax2.0+Formdata實現圖片拖拽上傳

概述

今天用H5的FileReader，drag，Formdata等仿照郵件的文件上傳功能作了一個圖片拖拽上傳，主要流程以下：
1.監聽元素的ondrop事件，並獲取事件對象event.dataTransfer.files的值
2.用FileReader讀取步驟1中獲取的值並添加到動態建立的li中
3.用Formdata獲取最終的值並用ajax2.0上傳

注意項：

ondragenter:須要阻止默認事件，不然ondrop不會執行;
ondrop:也須要阻止默認事件，不然圖片會默認在瀏覽器中打開

效果

代碼地址

github.com/fanxuewen/e…