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

stone_fan發表於2019-04-16

概述

今天用H5的FileReader,drag,Formdata等仿照郵件的檔案上傳功能做了一個圖片拖拽上傳,主要流程如下:
1.監聽元素的ondrop事件,並獲取事件物件event.dataTransfer.files的值
2.用FileReader讀取步驟1中獲取的值並新增到動態建立的li中
3.用Formdata獲取最終的值並用ajax2.0上傳

注意項:

ondragenter:需要阻止預設事件,否則ondrop不會執行;
ondrop:也需要阻止預設事件,否則圖片會預設在瀏覽器中開啟

效果

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

程式碼地址

github.com/fanxuewen/e…

相關文章