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
