ajax提交数据中formdata的使用

什么是formdata

FormData是Ajax2.0(XMLHttpRequest Level2)提供的一种将form表单元素name和value组合成键值，实现表单数据的序列化，从而减少from表单元素的拼接，提高工作效率对的接口，以方便将form表单数据通过XMLHttpRequest.send() 方法发送到后端，可以使用该对象来处理form表单元素并方便的进行文件上传。

FormData主要用途

1.将form表单元素的name和value组合成键值对，实现表单数据序列化，提高开发效率。

2 异步上传文件。

FormData用法

初始化
创建一个空对象实例。
var myform = new FormData();
复制代码

使用已有的表单来初始化

<form id="myForm" action="" method="post"><input type="text" name="name">名字<input type="password" name="psw">密码<input type="submit" value="提交">
</form>

可以使用这个表单元素作为初始化参数，来实例化FormData对象

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);

**FormData.append()**向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

**FormData.delete()**从 FormData 对象里面删除一个键值对。

FormData 对象能够设置三种类型的值，string、Blob、File，所以我们不需要转换格式，可以直接传文件，当我们传递 File 到 formatData 层，会直接被 append 到 FormData 对象里，且可以通过 get 获取到值，然后发送请求到服务端，我们能从浏览器入参中清晰的看到 d 、e 参数的类型是 binary，因为就是二进制的文件类型，这样服务端接到值之后很方便获取。

每一个参数之间都有一个 ------WebKitFormBoundary *** 区分开，这实际上是 FormData 的规范标志，后面的字符串是浏览器帮我们自动创建的，以 ------WebKitFormBoundary *** 作为分隔符，也作为开始和结尾，其内容主要有 Content-Disposition、Content-Type 等，其中 Content-Disposition 是必选项， name 属性代表着表单元素的 key，filename 则是上传文件的名称，也可以使用 FormData 第三个参数更改，另外，我在发送请求时，并没有更改请求头里面的 Content-Type，但实际上我们看到的是正确的 multipart/form-data，这是因为现在的浏览器比较智能，当客户端未设置请求头的 Content-Type 时，请求参数为对象时，某一些浏览器会自动帮我们在请求头中添加 Content-Type: text/plain，如果传输的数据是 FormData，也会自动帮我们加上 Content-Type: multipart/form-data 等，可能不同浏览器表现行为不一样，但是最好的方式就是客户端与服务端约定好 Content-Type 类型，固定传递。