FormData用法详解

FormData用法详解FormData 对象 一 创建一个 formData 对象实例的方式 1 创建一个空对象 varformData newFormData 通过 append 方法添加数据 2 使用已有表单来初始化对象 表单示例 lt formid myForm action method post gt lt inputtype text name

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




1、创建一个空对象

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

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

//表单示例 
  
名字 密码
//方法示例 // 获取页面已有的一个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");

二. 操作方法

//通过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的转换为大于0 var 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/16454

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/201414.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月20日 上午9:26
下一篇 2026年3月20日 上午9:27


相关推荐

  • Android 自定义 ViewPager 打造千变万化的图片切换效果

    Android 自定义 ViewPager 打造千变万化的图片切换效果转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开始让ViewPager来做。时间长了,ViewPager的切换效果觉得枯燥,形成了审美疲劳~~我们需要改变,今天教大家如

    2022年7月22日
    13
  • Python操作CSV格式文件

    Python操作CSV格式文件(一)CSV格式文件1.说明CSV是一种以逗号分隔数值的文件类型,在数据库或电子表格中,常见的导入导出文件格式就是CSV格式,CSV格式存储数据通常以纯文本的方式存数数据表。(二)CSV库操作csv格式文本操作一下表格数据:1.读取表头的2中方式#方式一importcsvwithopen(“D:\\test.csv”)asf:read

    2022年7月21日
    17
  • LZW压缩算法详解

    LZW压缩算法详解把话说明白很重要 gt https segmentfault com a 25787

    2025年8月13日
    6
  • linux怎么查看硬盘读写数据,Linux查看硬盘读写情况(汇总版)

    linux怎么查看硬盘读写数据,Linux查看硬盘读写情况(汇总版)除了 CPU 和内存 硬盘读写 I O 能力也是影响 Linux 系统性能的重要因素之一 本节将介绍几个可用来查看硬盘读写性能的系统命令 并教大家如何通过这些命令的输出结果 判断出当前系统中硬盘是否处于超负荷运转 Linux 查看硬盘读写性能 sar d 命令 Linuxsar 命令 一节 已经对 sar 命令的基本用法做了详细的介绍 这里不再赘述 接下来主要讲解如何通过 sar d 命令分析出硬

    2026年1月31日
    5
  • PHP与RBAC设计思路讲解与源码

    PHP与RBAC设计思路讲解与源码

    2021年10月30日
    38
  • java.lang.ClassNotFoundException: org.springframework.boot.Bootstrapper

    java.lang.ClassNotFoundException: org.springframework.boot.Bootstrapper错误13:20:03.686[main]ERRORorg.springframework.boot.SpringApplication-Applicationrunfailedjava.lang.NoClassDefFoundError:org/springframework/boot/Bootstrapper atjava.lang.ClassLoader.defineClass1(NativeMethod) atjava.lang.ClassLoader.defineCla

    2022年7月20日
    22

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号