FormData表单序列化

当我们用ajax提交表单时，通常用的都是serialize对表单进行序列化。

但是有了文件标签type='file'时，用serialize进行序列化，就会有问题了

解决表单有文件时序列化的方法，就是用FormData

下面来说下FormData怎么用：

FormData用法

实例化了一个空的FormData对象，可以认为它就是一个form表单，但现在里面什么控件都没有。
```
var formData = new FormData();
```
1. 可直接放表单对象序列化，自动封装对象对象为DOM对象
```
var formData = new FormData($("#subForm")[0]);
```
1. 给实例化的formdata对象添加一个控件，注意这里添加的是表单已写有input标签的
```
<input type="file" name="myfile">
```
```
formData.append('myfile', $('input[name=myfile]')[0].files[0]);
```
1. 没用表单时，以“键-值”对的形式给FormData添加控件，注意第3个参数“上传文件名”是可选的
```
FormData.append(name, value, filename);
```
1. 将实例化的formData作为jQuery.ajax()方法data参数的值传递进去，提交给后端服务器
注意的是以下三个参数不可少
```
cache: false,
processData: false,
contentType: false,
```
cache设置为false，上传文件不需要缓存。

processData参数，根据jQuery.ajax()文档中的解释，默认情况下，jQuery会处理发送的数据，将数据按照’application/x-www-form-urlencoded’的要求转换为查询字符串，如果要发送的数据是DOMDocument或者不需要处理，就可以设置为false不让jQuery转换数据，我们这里要发送的数据其实就是DOMDocument。

contentType设置为false。因为是由form表单构造的FormData对象，且已经声明了属性***enctype=“mutipart/form-data”***，所以这里设置为false。

FormData代码例子

一、有表单

ajax用var formData = new FormData($("#subForm")[0]);

<form id= "Form" enctype="multipart/form-data">......
</form>

function ajaxSubmit(){var url = "提交路径";//有文件上传，所以使用FormData装载表单//serialize()不序列化上传的文件var formData = new FormData($("#Form")[0]);$.ajax({url : url,type: 'POST',data: formData,cache: false,processData: false,contentType: false,success: function (data) {alert(data);}

二、没有表单

var oMyForm = new FormData();oMyForm.append("userName", "Groucho");oMyForm.append("accountnum", 123456); oMyForm.append("file", $('#file')[0].files[0]);  $.ajax({url: '提交路径',type: 'POST',data: oMyForm,cache: false,processData: false,contentType: false,success:function(data){alert(data);
}

FormData表单序列化相关推荐

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
antd如何获取表单的值_JavaScript多个表单序列化获取值
JavaScript多个表单序列化获取值获取数据格式如下: [{inid: "1231", age: "231231", sex: "123&quo ...
ajax异步请求——form表单提交及表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
JQuery表单序列化方式
使用场景:ajax提交表单数据 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
表单序列化以及后台表单数据参数的提取
(该资料是楼主复习时所用,很浅显,如果有哪些地方不正确,欢迎大家留言指出) 提交表单的时候,一个表单可能会有多个参数,为了将这些参数传到后台,有两种方法: (1)通过表单id一个一个地将表单输入栏的v ...
JS的表单序列化，数组去重，判断数组是否重复等方法
一.背景本篇主要是记录一下JS中常用的工具方法.包括表单序列化,判断数组是否重复,数组去重等.做个笔记二.工具方法 1.表单元素序列化为对象 public function serializeOb ...
antd提交表单_表单序列化
随着 Ajax 的出现,表单序列化已经成为一种常见需求.在 JavaScript 中,可以利用表单字段的 type 属性,连同 name 和 value 属性一起实现对表单的序列化.在编写代码之前, ...
JQ表单序列化变成对象
JQ表单序列化变成对象 function serializeObject(form) { var o = {}; $.each(form.serializeArray(), function(ind ...
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么一.总结一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

FormData表单序列化

FormData用法

FormData代码例子

一、有表单

二、没有表单

FormData表单序列化相关推荐

最新文章

热门文章