使用FormData对form表单序列化

一、FormData作用

1. 将form表单元素的name与value进行组合，实现表单数据的序列化
2. 异步上传二进制文件

二、创建formData对象

	<!-- 创建普通的html表单 -->
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<!-- type 设置为button，不会触发form 提交 -->
		<input type="button" id="btn" value="提交">
	</form>
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 获取表单 必须为原生的dom元素
		var form = document.getElementById('form');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 将普通的html表单转换为表单对象
			var formData = new FormData(form);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3000/formData');
			// 发送ajax请求
			xhr.send(formData);
			// 监听xhr对象下面的onload事件
			xhr.onload = function () {
				// 对象http状态码进行判断
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				}
			}
		}
	</script>

三、formData对象操作方法

1. get(‘key’) 获取表单对象属性的值
2. set(‘key’, ‘value’) 设置表单对象属性的值
3. delete(‘key’) 删除表单对象属性中的值
4. append(key,value)在数据末尾追加数据
5. getAll(‘user’)获取取key为user的所有值 [‘a’,‘b’]

	<!-- 创建普通的html表单 -->
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="button" id="btn" value="提交">
	</form>
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 获取表单
		var form = document.getElementById('form');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 将普通的html表单转换为表单对象
			var formData = new FormData(form);
			
	        //获取username的value值
	        formData.get('username');
	        //设置username的value值为tom
	        formData.set('username','tom');
	        console.log(formData.get('username'))// tom
	        //删除 
	        formData.delete('password');
	        console.log(formData.get('password'))// null
	        //在数据末尾追加
	        formData.append('sex','女');
	        console.log(formData.get('sex'));//‘女’
	
	        // set('sex','女') 有则修改，没有则添加
	        //append('sex','女') 不管是否存在，都会末尾追加
	        formData.append('sex','男');
	
	        //获取所有属性值
	        console.log(formData.getAll('sex')) //  ['女','男']        
	</script>

四、jquery中Ajax如何请求

    $.ajax({
      url:'/api/reg',
      type:'post',
      processData: false,
      contentType: false,
      catch:false,
      data:formData,
      success:function(res){
         console.log(res);
      }
    })

Ajax上传文件的cache、processdata、contentType属性以及FormData对象的总结
前言：在之前的Ajax一次性上传多张图片并实现预览的博客中提到，如果要用 Ajax 上传文件，则需要使用 FormData 对象来作为数据，而不能使用 form 的 serialize 方法（原因是 serialize 方法得到的数据是一个字符串，其不支持二进制数据传输，因此无法上传文件）

1. FormData对象
   var formdata = new FormData();//创建一个新的FormData对象
   //Ajax中的 data 属性就是 formdata
   formdata.append(‘name’,‘value’); //使用append的方法为 formdata 对象赋值

2. Ajax属性：cache、processData、contentType
   ① cache：缓存
   当发起一次请求后，会把获得的结果以缓存的形式进行存储，当再次发起请求时，如果 cache 的值是 true ，那么会直接从缓存中读取，而不是再次发起一个请求了。
   从 cache 的工作原理可以得出，cache 的作用一般只在 get 请求中使用。

② processData：处理数据
默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false

③ contentType：发送数据的格式
和 contentType 有个类似的属性是 dataType ， 代表的是期望从后端收到的数据的格式，一般会有 json 、text……等
而 contentType 则是与 dataType 相对应的，其代表的是 前端发送数据的格式

默认值：application/x-www-form-urlencoded
代表的是 ajax 的 data 是以字符串的形式 如 id=2019&password=123456
使用这种传数据的格式，无法传输复杂的数据，比如多维数组、文件等

有时候要注意，自己所传输的数据格式和ajax的contentType格式是否一致，如果不一致就要想办法对数据进行转换
把contentType 改成 false 就会改掉之前默认的数据格式，在上传文件时就不会报错了。

五、后端如何接收

Formidable是Node.js模块，用于解析表单数据，特别是文件上传。

1. 下载formitable

npm install formidable --save

2. 引入

var formidable = require('formidable')

3. 创建formidable表单解析对象

var form = new formidable.IncomingForm()

4. 解析request请求中表单提交的formdata数据，如果提供了回调函数callback，则收集所有字段和文件并将其传递给回调。

form.parse(request, [cb]);

form.parse(req, function(err, fields, files) {
  // ...err 错误   fields 表单中普通请求参数， files 文件参数
  console.log(files);
});