H5 FileReader+drag+ajax2.0+Formdata实现图片拖拽上传

649 阅读1分钟

概述

今天用H5的FileReader,drag,Formdata等仿照邮件的文件上传功能做了一个图片拖拽上传,主要流程如下:
1.监听元素的ondrop事件,并获取事件对象event.dataTransfer.files的值
2.用FileReader读取步骤1中获取的值并添加到动态创建的li中
3.用Formdata获取最终的值并用ajax2.0上传

注意项:

ondragenter:需要阻止默认事件,否则ondrop不会执行;
ondrop:也需要阻止默认事件,否则图片会默认在浏览器中打开

效果

代码地址

github.com/fanxuewen/e…