摘要：分析一下请求信息，发现这种提交方式与表单提交是一样的，比如提交兼容性由图可见，在移动端，对低版本的设备支持不够友好。我们知道，在请求中，函数会自动生成请求头和请求主体。在浏览器不支持的情况下，我们可以通过拼接请求，来达到目的。
介绍
先看看 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表单提交是一样的，比如：
兼容性由图可见，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
摘要：如果是传入三个参数的方式，那么该值将是一个布尔值，文件，或者一个，如果不是，将被转成一个字符串可选传给服务器的文件名称一个。 系列文章 关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文...
摘要：需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。 需求 当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。 前提 请求是异步的。因为要实时获取到上传的进度...
摘要：关于对象数组传值总结代码提示已经存在于实体类中。提交数据数据获取判断控件类型以对象的形式向后台传数据在实体类中创建集合在集合中添加实例在中调用数据类型 关于 FormData 对象数组传值总结 jQuery Java Spring MVC jQuery 代码 提示： Ncr 已经存在于实体类中。 // 提交数据 $(#submit-btn).click(func...
摘要：关于对象数组传值总结代码提示已经存在于实体类中。提交数据数据获取判断控件类型以对象的形式向后台传数据在实体类中创建集合在集合中添加实例在中调用数据类型 关于 FormData 对象数组传值总结 jQuery Java Spring MVC jQuery 代码 提示： Ncr 已经存在于实体类中。 // 提交数据 $(#submit-btn).click(func...
摘要：关于移动端拍照上传图片的解决方案场景产品要求用户拍一张身份证和一张人像，然后后台调用商用接口比对证件和人像的匹配度。缺点手机拍照图片过大，压缩后，图片依然大，没上传一次花费时间过长，最后再调用接口比对时间花费也长。 关于移动端拍照上传图片的解决方案 场景 产品要求用户拍一张身份证和一张人像，然后后台php调用商用接口比对证件和人像的匹配度。showImg(https://segment...
阅读 1776·2021-10-11 10:58
阅读 3380·2021-08-02 13:41
阅读 2073·2019-08-30 15:56
阅读 1416·2019-08-30 11:17
阅读 1064·2019-08-29 15:18
阅读 450·2019-08-29 11:10
阅读 2565·2019-08-26 13:52
阅读 390·2019-08-26 13:22
