当HTML表单同时包含文件上传元素和其他元素时，浏览器不能使用普通的表单编码而必须使用称为“multipart/form-data”的特殊Content-Type来用POST方法提交表单。这种编码包括使用长“边界”字符串把请求主体分离成多个部分。对于文本数据，手动创建“multipart/form-data”请求主体是可能的，但很复杂

XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利

[注意]IE9-浏览器不支持

【构造函数】

new FormData (form? : HTMLFormElement)

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

【append()】

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

void append(DOMString name, Blob value, optional DOMString filename); void append(DOMString name, DOMString value);

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

【其他不常用方法】

get()：通过get(key)/getAll(key)来获取对应的value

set()：通过set(key,value)修改数据，如果指定的key不存在则新增一条，如果存在，则修改对应的value值

has()：通过has(key)来判断是否对应的key值

delete()：通过delete(key)来删除数据

[注意]以上4个不常用方法，IE浏览器都不支持

var oData1 = new FormData(); console.log(oData1.has('a'));//false oData1.append('a',1); console.log(oData1.has('a'));//true console.log(oData1.get('a'));//1 oData1.set('a',2); oData1.append('a',1); console.log(oData1.get('a'));//2 console.log(oData1.getAll('a'));//["2", "1"] oData1.delete('a'); console.log(oData1.get('a'));//null ===> var oData1 = new FormData(document.forms.form1); console.log(oData1.has('a'));//true console.log(oData1.get('a'));//1 oData1.append('a',2); console.log(oData1.get('a'));//1 console.log(oData1.getAll('a'));//['1','2'] </script>

一般地，我们使用FormData()构造函数创建FormData对象，然后按需多次调用这个对象的append()方法把个体“部分”(可以是字符串、File或Blob对象)添加到请求中。最后，把FormData对象传递给send()方法，通过XHR对象将其发送到服务器

[注意]multipart/form-data只能用于post方式

=====> > <script> var oForm = document.forms.form1; oForm.onchange = function(){ //创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //异步接受响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //实际操作 result.innerHTML = xhr.responseText; } } } //发送请求 xhr.open('post','t1.php' ,true); xhr.send(new FormData(form1)); } </script>

分享给小伙伴们：

本文标签： FormData，ajax/">FormData，ajax

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻