首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浅析 FormData

这是第 132 篇不掺水的原创 本文首发于政采云前端团队博客:浅析 FormData https://www.zoo.team/article/formdata 前因 在日常开发中都是使用公司内部封装好的...定义 FormData 这种方式相信很多同学都比较熟悉,它提供了一种表示表单数据的键值对 key/value 的构造方式,由名称和定义就知道 FormData 是专门为表单量身定做的类型,但其实其功能要比...application/json 强得多,比如文件上传的问题,用 FormData 传参能很好的解决,window 上也直接挂载了 FormData (https://developer.mozilla.org...我们在控制台实例化一个 FormData 对象,然后打印,如下 使用 可以看到其原型上有很多的方法,个人感觉这个 FormData 跟 Map 有点像,仔细观察可以知道都有 set、get、values...FormData 对象能够设置三种类型的值,string、Blob、File,所以我们不需要转换格式,可以直接传文件,当我们传递 File 到 formatData 层,会直接被 append 到 FormData

1.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    FormData使用方法详解

    2、异步上传文件 一、创建formData对象 1、创建一个空对象: //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append(...//通过set方法对值进行设置 formdata.set("name","laoliu"); console.log(formdata.get("name"));//laoliu 2、通过表单对formData...,返回值为数组类型 formdata.getAll("age"); 2、通过append(key,value)在数据末尾追加数据 //通过FormData构造函数创建一个空对象 var formdata...来设置修改数据 key的值不存在,会添加一条数据 //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //如果key的值不存在会为数据添加一个key...var formdata=new FormData(); //通过append()方法在末尾追加key为name值为laoliu的数据 formdata.append("name","laoliu")

    1.8K30

    DOMString、Document、FormData、Blob、File、ArrayBuffer (转)

    一、XMLHttpRequest 2.0的家臣们 我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位、职位兴起以及工作分工等。...规范解释说DOMString指的是UTF-16字符串,而JavaScript正是使用了这种编码的字符串,因此,在Ajax中,DOMString就等同于JS中的普通字符串。...相关JS代码如下: document.querySelector("#formData").addEventListener("submit", function(event) { var myFormData...我们打开工具查看下请求: 以上分别是Firebug和Chrome开发者工具查看的结果。 ? ? 我们再看下传统Ajax请求: 差异还是比较大的。...目前的slice()方法已经跟JS中数组啊,字符串的slice方法用法一致了。

    2.8K30

    Next.js高级表单处理:整合Server Actions、FormData、react-hook-form和zod

    核心技术概览Next.js Server Actions:允许直接在组件中定义服务器端函数,简化了客户端和服务器之间的通信。FormData:Web API提供的接口,用于构造表单数据集合。...如果验证通过,数据被转换为FormDataFormData被传递给Server Action(createUser)。服务器端处理:Server Action接收FormData并进行服务器端验证。...Next.js会自动生成必要的客户端代码来处理这些调用,包括处理加载状态和错误。'...use client'这个指令告诉Next.js从这一点开始的代码应该在客户端运行。在构建时,Next.js会将这些组件和它们的依赖打包到客户端bundle中。...结论这种结合Next.js Server Actions、FormData、react-hook-form和zod的方法为现代Web应用程序提供了一个强大、灵活且高效的表单处理解决方案。

    39510

    Blob、ArrayBuffer、File、FileReader和FormData的区别

    因此,我们首先着重区分Blob、ArrayBuffer、File,然后再对fileReader和FormData做简要介绍。...因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区。 在 Node.js 中,Buffer 类是随 Node 内核一起发布的核心库。...Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动的数据时,就有可能使用 Buffer 库。...准确来说,FormData其实与上述内容关系就不大了。...FormData的最大优点就是,比起普通的ajax, 使用FormData我们可以异步上传一个二进制文件,而这个二进制文件,就是我们上面讲的Blob对象。

    5K21

    Ajax文件上传时:Formdata、File、Blob的关系

    Formdata接口 “Formdata”接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去。...方法、属性如下: FormData([Form])创建一个新的 FormData 对象,form这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去...FormData.get()返回在 FormData 对象中与给定键关联的第一个值。 FormData.getAll()返回一个包含 FormData 对象中与给定键关联的所有值的数组。...FormData.has()返回一个布尔值表明 FormData 对象是否包含某些键。 FormData.keys()返回一个包含所有键的iterator对象。...FormData.set()给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

    3.2K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券