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…