Javascript FormData实例

一.创建一个formData对象实例的方式
1、创建一个空对象var formData = new FormData();//通过append方法添加数据
1
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.get("name"); // 返回一个数组，获取key为name的所有值//通过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'});
}

posted on 2019-04-21 11:56 greatbing 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/bing2017/p/10744574.html

Javascript FormData实例相关推荐

javascript --- [FormData的使用] 表单元素转换成表单对象二进制文件上传
1. FormData的作用 1.1 将Form表单元素,转换成表单对象在使用Ajax进行表单提交的时候,采用原生的js获取dom,然后添加属性.当表单项很多的时候,代码会很多.不利于后期阅读.维护 ...
html，css，js小实例,CSS和JavaScript脚本实例
CSS和JavaScript脚本实例导语:CSS样式和JavaScript脚本是应该放在外部文件中呢?还是把它们放在页面本身之内呢?以下的是百分网小编为大家搜集的CSS样式和JavaScript脚本 ...
超多树形结构的JavaScript菜单实例
超多树形结构的JavaScript菜单实例,树控菜单,有大家常用的展开折叠型,也就是节点树:还有的是多级的菜单,类似树型,右键菜单树,还有的是悬浮层树,都比较不错,希望大家喜欢. http://www ...
java 代码压缩javascript_通过Java压缩JavaScript代码实例分享
通过移除空行和注释来压缩 javascript 代码 /** * this file is part of the echo web application framework (hereinafte ...
JavaScript --函数 (实例结合)
JavaScript --函数 (实例结合) 文章目录 JavaScript --函数 (实例结合) 1.初识函数 2.参数设置 3.函数的调用 [案例]字符串大小写转换 4.变量的作用域 5.匿名函 ...
JavaScript 常用实例
阅读目录阐述 JavaScript 常用实例字符串操作去除字符串空格字母大小写切换字符串循环复制字符串替换替换 * 检测字符串检测密码强度随机码(toString详解) 查找字符串次 ...
简单计算器——JavaScript小实例
简单计算器--JavaScript小实例先来看一下下我们要做的计算器(以iQOO neo5手机计算器为例): 这就是我们今天要做的计算器的模板,成品的样子会略有不同,但功能完善. 好,当我们看到这个 ...
JavaScript构造函数, 实例和静态成员
JavaScript构造函数, 实例和静态成员构造函数实例成员静态成员内置构造函数引用类型 Object Array 包装类型 String Number 构造函数构造函数是专门用于创建对 ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
JavaScript————FormData实现多文件上传
引言星期四的时候,我遇到了一个文件上传的问题,与以往不同的是,这一次上传的是多个文件,而且涉及到了久违的javascript代码. 虽然最后实现的并不尽如人意,不过也算是完成了功能,接下来就把我发现 ...

Javascript FormData实例

Javascript FormData实例相关推荐

最新文章

热门文章