FormData用法详解

FormData 对象：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0axz5Om-1642062084001)(https://sfault-image.b0.upaiyun.com/203/933/2039338818-5a28f425ab032_articlex)]
一.创建一个formData对象实例的方式

1、创建一个空对象

var formData = new FormData();//通过append方法添加数据

2、使用已有表单来初始化对象

//表单示例
<form id="myForm" action="" method="post"><input type="text" name="name">名字<input type="password" name="psw">密码<input type="submit" value="提交">
</form>//方法示例
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

二. 操作方法

formData里面存储的数据是以健值对的形式存在的，key是唯一的，一个key可能对应多个value。
如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
1.获取值

//通过get(key)/getAll(key)来获取对应的value
formData.get("name"); // 获取key为name的第一个值
formData.getAll("name"); // 返回一个数组，获取key为name的所有值

2 添加数据

//通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");

获取值时方式及结果如下

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]

3.设置修改数据

//set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

4.判断是否存在对应数据

//has(key)来判断是否对应的key值
formData.append("k1", "v1");
formData.append("k2",null);formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

5.删除数据

//delete(key)删除数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");formData.getAll("k1"); // []

三.JQuery实例

//添加数据方式见上二。
//processData: false, contentType: false,多用来处理异步上传二进制文件。$.ajax({url: 'xxx',type: 'POST',data: formData,                    // 上传formdata封装的数据dataType: 'JSON',cache: false,                      // 不缓存processData: false,                // jQuery不要去处理发送的数据contentType: false,                // jQuery不要去设置Content-Type请求头success:function (data) {           //成功回调console.log(data);}
});

附：

/*** 将以base64的图片url数据转换为Blob文件格式* @param urlData 用url方式表示的base64图片*/
function convertBase64UrlToBlob(urlData) {var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for(var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob([ab], {type: 'image/png'});
}

内容摘自https://segmentfault.com/a/1190000006716454

FormData用法详解相关推荐

【JS基础】var formdata=new FormData() 【FormData用法详解】
FormData用法详解简介 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即将form 中表单元素的 name 与 value 组装成一个 queryString 2.异步 ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
python argv 详解_Python3 sys.argv[ ]用法详解
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个"外部"很关键,因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可 ...
oracle中的exists 和 not exists 用法详解
from:http://blog.sina.com.cn/s/blog_601d1ce30100cyrb.html oracle中的exists 和 not exists 用法详解 (2009-05- ...
ROW_NUMBER() OVER()函数用法详解（分组排序例子多）
ROW_NUMBER() OVER()函数用法详解 (分组排序例子多) https://blog.csdn.net/qq_25221835/article/details/82762416 post ...
python的继承用法_【后端开发】python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
C++中substr()函数用法详解
C++中substr()函数用法详解原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...
php theme_path,PHP_Yii2主题(Theme)用法详解，本文实例讲述了Yii2主题(Theme) - phpStudy
Yii2主题(Theme)用法详解本文实例讲述了Yii2主题(Theme)用法.分享给大家供大家参考,具体如下: 首先看看主要的配置方式: 'components' => [ 'view' = ...

FormData用法详解

FormData 对象：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0axz5Om-1642062084001)(https://sfault-image.b0.upaiyun.com/203/933/2039338818-5a28f425ab032_articlex)]
一.创建一个formData对象实例的方式

二. 操作方法

三.JQuery实例

FormData用法详解相关推荐

最新文章

热门文章

FormData用法详解

FormData 对象： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0axz5Om-1642062084001)(https://sfault-image.b0.upaiyun.com/203/933/2039338818-5a28f425ab032_articlex)] 一.创建一个formData对象实例的方式

二. 操作方法

三.JQuery实例

FormData用法详解相关推荐

最新文章

热门文章

FormData 对象：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0axz5Om-1642062084001)(https://sfault-image.b0.upaiyun.com/203/933/2039338818-5a28f425ab032_articlex)]
一.创建一个formData对象实例的方式