关于 FormData

shuibo 发布于2019-08-20 13:42 / 2570人阅读

摘要：分析一下请求信息，发现这种提交方式与表单提交是一样的，比如提交兼容性由图可见，在移动端，对低版本的设备支持不够友好。我们知道，在请求中，函数会自动生成请求头和请求主体。在浏览器不支持的情况下，我们可以通过拼接请求，来达到目的。

介绍

先看看 MDN 对FormData的介绍:

XMLHttpRequest Level2添加了一个新的接口FormData. 利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

特点就是，增加了ajax对二进制文件上传的支持。比如：

var formData = new FormData();
formData.append("username", "sam");
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = "hey!"; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", url);
request.send(formData);

这个例子既有File，还有Blob 类型文件，利用FormData 能轻松的进行异步上传。

请求头部

可以看到 Content-Type 为:

multipart/form-data; boundary=----WebKitFormBoundary2KZkAN7R3gSDjBJz

图中没有看到 file 的二进制文件

请求主体

每个参数包括：

第一行，“分界线”，图中chrome的分界线是：“——WebKitFormBoundary”加16位随机Base64位编码的字符串作为分隔边界

第二行，内容配置，指明form-data,和name键名称

第三行，指明content-type

第三行或第四行，空行

注意，整个body结束最后，多了一个分界线。

分析一下请求信息，发现这种提交方式与form表单提交是一样的，比如：


    username

兼容性

由图可见，FormData 在移动端，对低版本的 Android 设备支持不够友好。

我们知道，在ajax请求中，send函数会自动生成请求头和请求主体。所以，send(formData)浏览器会自动生成上图中的请求。在浏览器不支持FormData的情况下，我们可以通过拼接multipart/form-data请求，来达到目的。

动手实现了一个：https://github.com/henryluki/...

参考

FormData
The Multipart Content-Type
XMLHttpRequest Standard
Returning Values from Forms: multipart/form-data

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81194.html

关于前端上传文件全面基础扫盲贴(三) ----- FormData

摘要：如果是传入三个参数的方式，那么该值将是一个布尔值，文件，或者一个，如果不是，将被转成一个字符串可选传给服务器的文件名称一个。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文...

developerworks 2019-08-26 10:30 评论0 收藏0
文件上传进度提示

摘要：需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。前提请求是异步的。因为要实时获取到上传的进度...

MageekChiu 2019-08-20 15:17 评论0 收藏0
关于 FormData 对象数组传值总结

摘要：关于对象数组传值总结代码提示已经存在于实体类中。提交数据数据获取判断控件类型以对象的形式向后台传数据在实体类中创建集合在集合中添加实例在中调用数据类型关于 FormData 对象数组传值总结 jQuery Java Spring MVC jQuery 代码提示： Ncr 已经存在于实体类中。 // 提交数据 $(#submit-btn).click(func...

Cristalven 2019-08-22 17:04 评论0 收藏0
关于 FormData 对象数组传值总结

摘要：关于对象数组传值总结代码提示已经存在于实体类中。提交数据数据获取判断控件类型以对象的形式向后台传数据在实体类中创建集合在集合中添加实例在中调用数据类型关于 FormData 对象数组传值总结 jQuery Java Spring MVC jQuery 代码提示： Ncr 已经存在于实体类中。 // 提交数据 $(#submit-btn).click(func...

liaorio 2019-08-15 15:53 评论0 收藏0