HTML5 FormData 对象的使用

本文详细介绍了HTML5中的FormData对象及其使用方法,包括如何通过表单元素创建FormData对象、如何手动添加字段以及如何利用XMLHttpRequest Level 2进行文件上传,并支持进度条显示和拖放上传等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@HTML5 FormData 对象的使用

HTML5 FormData 对象的使用

FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。

##你可以自己创建一个FormData对象,然后调用它的append()方法来添加字段,像这样

在这里插入图片描述

通过HTML表单创建FormData对象

想要构造一个包含Form表单数据的FormData对象,需要在创建FormData对象时指定表单的元素。

在这里插入图片描述
你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前,附加额外的数据到FormData对象里,像这样:
在这里插入图片描述

上传进度条

XMLHttpRequest第二版还定义了一个progress事件,可以用来制作进度条。

在这里插入图片描述

拖放上传

最后,利用HTML5的拖放功能,实现拖放上传。
先在页面中放置一个容器,用来接收拖放的文件。

html
在这里插入图片描述css
在这里插入图片描述
js

在这里插入图片描述

插入链接与图片

链接: link.

Alt

居中并且带尺寸的图片: Alt

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值