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。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型&quot;application/x-www-form-urlencoded&quot;。如果要发送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]); // 表单对象。取不到表单对象

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

ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
vue + elementui + axios表单数据和文件上传
实现的功能: 1.表单数据提交, 2.表单中携带文件附件. 3.附件上传过程中进度提示. 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个 ...
WebApi发送HTML表单数据：文件上传与多部分MIME
5.3 Sending HTML Form Data 5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/28 ...
(27) java web的struts2框架的使用-基于表单的多文件上传
和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...
Web后端学习笔记 Flask（8） WTForms 表单验证，文件上传
Flask-WTF是简化了WTForms操作的一个第三方库.WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板.同时还包含一些其他的功能.例如CSRF保护,文件上传等功能,安装fl ...
(转)WebApi发送HTML表单数据：文件上传与多部分MIME
5.3 Sending HTML Form Data 5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/28 ...
SpringMVC之表单提交===③===多文件上传表单
上文简单介绍了springmvc单文件上传表单 ,本文继续介绍多文件上传表单.包含单文件上传的表单已经能够满足大部分功能需求,但任然不够完善.实际业务中可能会包含多个文件同时上传,例如:商家在电商平台 ...
html表单调用js文件上传,简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下一.用input完成上传,效果图如选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...
vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...

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

serialize和 FormData 区别

详细代码

@RequestParam(value = “file”)

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

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

最新文章

热门文章

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

serialize和 FormData 区别

详细代码

@RequestParam(value = “file”)

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

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

最新文章

热门文章

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