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

栏目: jQuery · 发布时间: 5年前

内容简介:今天用H5的FileReader,drag,Formdata等仿照邮件的文件上传功能做了一个1.监听元素的ondrop事件,并获取事件对象2.用FileReader读取步骤1中获取的值并添加到动态创建的li中

今天用H5的FileReader,drag,Formdata等仿照邮件的文件上传功能做了一个 图片 拖拽上传,主要流程如下:

1.监听元素的ondrop事件,并获取事件对象 event.dataTransfer.files 的值

2.用FileReader读取步骤1中获取的值并添加到动态创建的li中

3.用Formdata获取最终的值并用ajax2.0上传

注意项:

ondragenter:需要阻止默认事件,否则ondrop不会执行;

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程精粹

编程精粹

Steve Maguire / 人民邮电出版社 / 2009.2 / 45.00元

编写高质量的、没有bug的程序,是每位程序员所追求的目标。但随着软件规模越来越大,功能日趋复杂,这一目标变得越来越困难。 本书揭示了微软公司应对质量挑战、开发出世界级代码的技术内幕,作者在自己不断探索、实践和思考的基础上,系统总结了多年来指导微软各团队的经验,将其凝聚为许多切实可行的编程实践指导,可谓字字珠玑。正因如此,本书被公认为与《代码大全》齐名的编程技术名著,曾于1993年荣获有软件开......一起来看看 《编程精粹》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器