JS之AJAX篇FormData对象

开发中，经常会遇到文件上传、表单提交的情况，当HTML表单同时包含文件上传元素和其他元素时，Content-Type的MIME类型必须是“multipart/form-data”，并且用POST方法提交表单。XMLHttpRequest 2级定义了FormData类型，为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利

new FormData (form? : HTMLFormElement)


可选参数form表示一个HTML表单元素，可以包含任何形式的表单控件，包括文件输入框

append()

append()方法用于给当前FormData对象添加一个键/值对

append(name, value[, filename])


name表示字段名，value表示字段值。filename是一个可选的参数，当value参数被指定为一个Blob对象或者一个File对象时，filename会被发送到服务器，它用于指定文件的文件名。对于Blob对象来说，filename默认为"blob"

创建FormData对象




男
女



自定义FormData对象

自定义FormData对象和使用表单创建FormData对象的效果是一样的

btn.Onclick= function() {
var f = new FormData();
f.append('username', 'qqq')
f.append('password', 'qqq')
f.append('sex', '男')
var xhr = new XMLHttpRequest();
xhr.Onreadystatechange= function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
result.innerHTML = xhr.responseText
}
}
}
xhr.open('POST', '/api/test', true);
xhr.send(f)
}


注意： multipart/form-data类型只能用于post方式

优秀文章首发于聚享小站，欢迎关注!

原文链接：https://www.cnblogs.com/yesyes/p/15352632.html