ajax-FormData快速序列化表单数据以及文件上传

serialize和 FormData 区别

$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别

首先，前者，只能序列化表单中的数据 ，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了

new FormData使用需要有一个注意点，

**注意点一：**对于jquery的要求是， 版本1.8及其以上方可支持。

另外该对象不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）；

注意点二：
ajax方式提交时，processData: false, contentType: false,缺少这二者的设置，将会出现错误提示，提交失败。

Uncaught TypeError: Illegal invoca //ajax传入参数不符合要求

processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false

详细代码

<form class="form-horizontal" id="frm">
    <div class="form-group">
        <label class="col-sm-1 control-label">类别</label>
        <div class="col-sm-2">
            <select id="article_type" name="article_type" class="form-control art-r">
                <option value="">==请选择类型==</option>
                <option value="1">系统推荐文章</option>
                <option value="2">系统通知信息</option>
            </select>
        </div>
        <label class="col-sm-1 control-label">标题</label>
        <div class="col-sm-4">
            <input type="text" class="form-control art-r" id="article_title" value="" name="article_title" autocomplete="off" placeholder="请输人标题" />
        </div>
        <label class="col-sm-1 control-label">封面</label>
        <div class="col-sm-3">
            <input type="file" id="file" name="file1" multiple>
        </div>
    </div>
    <hr width="100%" color="#987cb9" size=1>
    <div class="form-group">
        <div class="col-sm-12">
            <div id="test-editor">
                <textarea style="display: none;" id="article_content" name="article_content">### 关于 Editor.md</textarea>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <button type="button" id="add_article" name="add_article" class="btn btn-success art-r" style="float: right;">添加文章</button>
        </div>
    </div>
</form>

$("#add_article").click(function() {

	var article_title = $("#article_title").val();
	var article_type = $("#article_type").val();
	var article_content = $("#article_content").val();
	var upfile1 = $("#file").val();
	var upfile = $("#file")[0].files[0];

	if(article_title == ""){
		vali();
		return;
	}else if(article_type == ""){
		vali();
		return;
	}else if(article_content == ""){
		vali();
		return;
	}else if(upfile1 == ""){
		alert('请选择要上传头像！');
		return;
	}
	var formData = new FormData($('#frm')[0]); // 表单对象
	formData.append("file ", upfile ); // 文件对象
	console.log(formData);
	$.ajax({
		type:"POST",
		url: "/articles/insertArticleInfo",
		data:formData,
		dataType:"json",
		async:true,
		cache: false,
		processData: false,
		contentType: false,
		success: function(result){
			console.log(result);
			if(result.code == 1){
				$.alert(
					{
						title: '系统提示',
						type: 'red',
						icon:'glyphicon glyphicon-ok',
						content: "操作成功！"
					}
				);
			}
			else{
				alert(result.msg);
			}
		},
			error: function (result) {
				console.info("error: " + result);
			}

	});
});

@ResponseBody
@RequestMapping(value = "insertArticleInfo")
public Map < String, Object > addArticleInfo(Article article, @RequestParam(value = "file") MultipartFile file) {
    Map < String, Object > resultMap = new HashMap < > ();
	//后台业务省略  此处为序列化表单数据对象以及文件对象的取值测试
    resultMap.put("code", 1);
    resultMap.put("msg", "提交成功");
    resultMap.put("formdata1", "表单对象-标题" + article.getArticle_title());
    resultMap.put("formdata2", "表单对象-类型" + article.getArticle_type());
    resultMap.put("formdata3", "表单对象-内容" + article.getArticle_content());
    resultMap.put("filedata", "文件对象" + file);
    return resultMap;
}

@RequestParam(value = “file”)

@RequestParam是传递参数的.
@RequestParam用于将请求参数区数据映射到功能处理方法的参数上。
注意：上传文件的时候指定的key与@RequestParam中要求的不一致，导致了后台不能获取到上传的文件，出现如下警告信息

Required request part fileis not present

并且表单对象中的key也要和数据库中一致，否则序列化后 var formData = new FormData($(’#frm’)[0]); // 表单对象 。取不到表单对象