FormData详解

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。

构造函数

FormData()构造函数用于创建一个新的FormData对象。

var formData = new FormData(form)

form可选

一个HTML 上的``表单元素——当指定了，这种方式创建的FormData对象会自动将form中的表单值也包含进去，包括文件内容也会被编码之后包含进去。

例子

下面的代码将创建一个空的FormData对象:

var formData = new FormData(); // 当前为空// 你可以使用FormData.append来添加键/值对到表单里面；
formData.append('username', 'yang');

或者你可以使用可选的form参数来创建一个带预置数据的FormData对象:

<form id="myForm" name="myForm"><div><label for="username">Enter name:</label><input type="text" id="username" name="username"></div><div><label for="useracc">Enter account number:</label><input type="text" id="useracc" name="useracc"></div><div><label for="userfile">Upload file:</label><input type="file" id="userfile" name="userfile"></div>
<input type="submit" value="Submit!">
</form>

注意: 所有的输入元素都需要有name属性，否则无法访问到值。

vr formData = new FormData($("#myForm")[0]);
var name = formData.get("username"); // 获取名字
var psw = formData.get("useracc"); // 获取账户
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

API

FormData.append()

通过append(key,value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则追加到数据末尾

FormData.set和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

这个方法有两个版本：一个有两个参数的版本和一个有三个参数的版本。

// 语法
// name: value中包含的数据对应的表单名称
// value: 表单的值。可以是USVString 或 Blob (包括子类型，如 File)。
//filename (可选): 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。
formData.append(name, value);
formData.append(name, value, filename);// 示例
var formData = new FormData(); // Currently empty// 你可以通过 FormData.append 往对象里加入键值对：
formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');// 跟常规表单数据一样，你可以使用同一个名称添加多个值 。例如 (为了与PHP命名习惯一致在名称中添加了[])：
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');formData.getAll("userpic[]"); // [myFileInput1.files[0], myFileInput2.files[0]]

这项技术使得多文件上传的处理更加简单，因为所得数据结构更有利于循环。

FormData.get/getAll()

get()方法用于返回FormData对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用getAll()方法。

getAll()方法会返回该 FormData 对象指定 key 的所有值。

// 语法
// name: 将要获取值的键名
// 返回值： 包含值的FormDataEntryValue (en-US)。
formData.get(name);// 例子
var formData = new FormData();// 使用FormData.append方法添加两个数据:
formData.append('username', 'Chris');
formData.append('username', 'Bob');// 获取key为name的第一个值
formData.get('username'); // "Chris"// 返回一个数组，获取key为name的所有值
formData.getAll("username"); // ["Chris",'Bob']

FormData.delete()

delete() 方法会从 FormData 对象中删除指定键，即 key，和它对应的值，即 value

// 语法
// name: 要删除的键（Key）的名字
formData.delete(name);// 例子
var formData = new FormData(myForm);
formData.delete('username');

FormData.set()

给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

// 语法
// name: 字段名称
// value：字段的值，如果是传入两个参数的方式，那么该值是一个 USVString，如果不是，将被转成一个字符串。如果是传入三个参数的方式，那么该值将是一个布尔值（Blob），文件（File），或者一个 USVString，如果不是，将被转成一个字符串。
// filename(可选): 当第二个参数传递的是一个blob对象（Blob）或者file对象（File），filename参数就代表传给服务端的文件名（一个USVString）。Blob 对象的默认文件名是 "blob"。// 该方法有两种使用方式，一个是传入两个参数，一个是传入三个参数。
formData.set(name, value);
formData.set(name, value, filename);// 示例
var formData = new FormData(); // Currently empty
formData.set('username', 'Chris');
formData.set('userpic', myFileInput.files[0], 'chris.jpg');

FormData.has()

has()方法会返回一个布尔值，表示该FormData对象是否含有某个key

// 语法
formData.has(name);// 示例
var formData = new FormData();
formData.has('username'); // false
formData.append('username', 'Chris');
formData.has('username'); // true

FormData.entries()

FormData.entries() 方法返回一个 iterator对象，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象；value是一个 USVString , 或者 Blob对象。

// 语法
formData.entries();// 示例
// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');// 每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
// 返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
// 返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回
var i = formData.entries();
i.next(); // {done:false, value:["key1", "value1"]}
i.next(); // {done:fase, value:["key2", "value2"]}
i.next(); // {done:true, value:undefined}// 方式二
for(var pair of formData.entries()) {console.log(pair[0]+ ', '+ pair[1]);
}
key1, value1
key2, value2

FormData.keys()

FormData.keys() 该方法返回一个迭代器（iterator），遍历了该 formData 包含的所有key ，这些 key 是 USVString 对象。

// 语法
// 返回值：返回一个迭代器（ iterator）
formData.keys();// 示例
// 先创建一个 FormData 对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');// 输出所有的 key
for (var key of formData.keys()) {console.log(key);
}key1
key2

FormData.values()

FormData.values() 方法返回一个允许遍历该对象中所有值的迭代器。这些值是 USVString 或是Blob 对象。

// 语法
// 返回值：返回一个迭代器
formData.values();// 示例
//创建一个FormData测试对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');//显示值
for (var value of formData.values()) {console.log(value);
}
value1
value2

FormData 实践

FormData 对象的使用：

用一些键值对来模拟一系列表单控件：把 form 中所有表单元素的 name 与 value 组装成一个 queryString；
异步上传二进制文件；

FormData 对象的操作方法，全部在原型中本身没任何的属性及方法

使用 FormData 对象发送文件

<!--HTML部分-->
<form action=""><label for="">姓名: <input type="text" name="name"></label><label for="">文件：<input id="file" type="file" name="file"></label><label for=""><input type="button" value="保存"></label>
</form>

原生ajax

//原生js上传文件
//获取按钮
var btn = document.querySelector('[type=button]');
//绑定事件
btn.onclick = function () {// 文件元素var file = document.querySelector('[type=file]');// 通过FormData将文件转成二进制数据var formData = new FormData();// 将文件转二进制formData.append('upload', file.files[0]);//创建XMLHttpRequest，用这个来发送数据var xhr = new XMLHttpRequest;/*初始化HTTP请求参数(请求方式,url,是否同步)*/xhr.open('post', 'file.php');/*xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");设置请求头的contentType*/// 监听上传进度xhr.upload.onprogress = function (ev) {// 事件对象// console.log(ev);var percent = (ev.loaded / ev.total) * 100 + '%';console.log(percent);progress.style.width = percent;}xhr.send(formData);xhr.onreadystatechange = function () {//status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 if(xhr.readyState == 4 && xhr.status == 200) {}}
}

使用 jQuery

//绑定提交事件
function upload() {//获取form表单元素var f = document.getElementById("myForm");//使用表单元素来构造FromDatavar myform = new FormData(f);$.ajax({url: "/Library/test/upload",type: "post",dataType: "json",data: myform,cache: false,                      // 不缓存processData: false,                // jQuery不要去处理发送的数据contentType: false,                // jQuery不要去设置Content-Type请求头success: function (data) {console.log(data);}});
}

FormData详解相关推荐

前端FormData详解
1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 2. 构造函数创建一个formData ...
系统学习前端之FormData详解
FormData 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 2. 构造函数创建一 ...
Multipart/form-data POST文件上传详解
Multipart/form-data POST文件上传详解理论简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...
【JS基础】var formdata=new FormData() 【FormData用法详解】
FormData用法详解简介 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即将form 中表单元素的 name 与 value 组装成一个 queryString 2.异步 ...
FormData的详解
FormData的详解用途将form表单的name和value进行组合,实现表单序列化,减少拼接. 异步上传文件创建一个formData对象创建一个空对象 //通过FormData构造函数创建 ...
openstack页面自定义插件使用详解（django、ajax、post）（zTree为例）
2019独角兽企业重金招聘Python工程师标准>>> 感谢朋友支持本博客,欢迎共同探讨交流,由于能力和时间有限,错误之处在所难免,欢迎指正! 如有转载,请保留源作者博客信息. Be ...
Extjs Form用法详解（适用于Extjs5）
为什么80%的码农都做不了架构师?>>> Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Fo ...
【转】HTTP协议详解
原文地址:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html 一.概念协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则 ...
php编译工具知乎,关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解...
貌似我没有像QQ邮箱之类的装知乎的插件是用HTML5的新功能实现的吗? 看了@朱利安的回答,发现我描述的不够清楚我是用QQ截图之类的工具截的图,然后图片本身是保存在剪切板里的,剪切板中保存的*不 ...