JS-FormData对象使用

最新推荐文章于 2024-07-16 10:52:35 发布
最新推荐文章于 2024-07-16 10:52:35 发布
阅读量1w 收藏 5
点赞数 1
分类专栏： 前端 JS 文章标签： Html FormData
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang704987562/article/details/81045818
版权
这篇博客介绍了JS中的FormData对象，用于保存key/value结构的数据，常用于表单数据传输。文中给出了创建和使用FormData的例子，并详细阐述了XMLHttpRequest对象的属性、方法和事件监听，帮助理解HTTP请求的全过程。
摘要由CSDN通过智能技术生成
前言

FormData 对象用来保存key/value结构的数据，通常用于from传输数据，也可以独立于form使用，用来传输密钥数据。

例子

1.创建FormData对象

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字将被转换成字符串 "123456"

// 获取文件
formData.append("userfile", fileInputElement.files[0]);

// 创建Blob对象
//Blob 对象表示一个不可变、原始数据的类文件对象
var content = '<a id="a"><b id="b">hey!</b></a>'; 
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

2.通过form表单创建FormData对象

//表单中的input等元素必须有name属性作为可以，否则不添加到FormData对象
var formElement = $("#form_example")[0];
var formData = new FormData(formElement);

3.使用FormData对象发送文件数据

<html>
<head>
    <title>Title</title>
    <
最低0.47元/天 解锁文章
半笙彷徨
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript - formData 对象
王佳斌
01-26 2949
前言 formData 是 Ajax 2.0 提供一种表示表单数据的键值对 key / value 的构造方式。 它可将 form 表单元素的 name / value 进行组合，实现表单序列化从而减少拼接工作， 它也可以异步上传文件，很多框架上传组件都已经采用。 一、创建方式 创建一个 formData 对象非常简单，使用提供的构造函数即可，如下代码所示： // 创建一个空的FormData对象 var formData = new FormData() 当然，您也可以使用 “表单元素” 作为参数来
vue表单验证validate.min.js使用例子，formdata 文件上传表单提交
05-17
1、validate.min.js 表单验证，自定义规则，自定义中文错误提示 2、formdata 表单文件上传 3、文件上传获取缩略图 FileReader
object-to-formdata:方便JavaScript函数，可将对象序列化为FormData实例
05-02
对象到表单数据 方便JavaScript函数，可将对象序列化为FormData实例。 安装 npm install object-to-formdata 用法 注意：从版本4.0.0开始，已更改命名的出口！ 注意：从版本3.0.0开始，没有默认导出！ import { serialize } from 'object-to-formdata' ; const object = { /** * key-value mapping * values can be primitives or objects */ } ; const options = { /** * include array indices in FormData keys * defaults to false */ indices : false , /**
使用formdata-polyfill兼容iOS系统的FormData
DrLemonPie的博客
06-04 275
iOS的formdata里面包含realFormData和appendData，网上有人写传值data: realFormData || formData是纯扯淡。直接传appendData也不行，appendData是数组，不是formdata格式的数据。项目需求是移动端使用H5做文件上传功能，安卓和网页测试没有任何问题，唯独苹果手机上传不了，通过log打印发现iOS构造的formdata格式不一样。其他的不用改，非常神奇，这哥们是不是把formdata构造重写了。然后在项目里引入就ok了。
js普通对象转换成formData对象，并查看转换后的formData内容
最新发布
qq_59572992的博客
07-16 474
因为接口的原因，需要提交 multipart/form-data 格式的数据，需要将js的普通对象转换成formData对象用于提交。
ios 上传formdata兼容性问题处理总结
qq_35703552的博客
07-21 1963
这样在ios中newFormData()得到的对象就是和其他系统一致了。ios系统上的formdata对象是。导致在上传时后端无法识别。
JavaScript—异步提交表单的6种方式
weixin_30446613的博客
09-14 629
FormData的详细介绍及使用请点击此处，那里对FormData的方法和事件已经表述的非常清楚，这里就不再浪费时间在介绍一遍了。本文主要针对FormData对象的使用以及异步文件上传进行详细的说明。 FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。 1、从头开始创建一个F...
JS FormData对象
baicp3的专栏
04-26 8366
摘要 通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。但当我们使用Ajax提交时，这过程就要变成人工的了。因此，FormData对象的出现可以减少我们一些工作量。 想得到一个FormData对象： var formdat
XML DOM - XMLHttpRequest 对象简介
X_manchina的专栏
08-30 388
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX的 Web 应用程序架构的一项关键功能属性：readyStatereadyState 的
JS formData
weixin_30418341的博客
07-27 90
有时候，我们需要使用formData来上传文件，并根据反馈的结果做不同的处理， 这个时候使用form来提交文件不方便 #perform 获取的的上传文件所用的input标签 var formData = new FormData(); var file = $("#perform")[0].files[0]; console.log('file:'+fi...
JavaScript程序设计-FormData对象的使用.pdf
11-02
【JavaScript程序设计-FormData对象的使用】 在JavaScript中，FormData对象是XMLHttpRequest 2级引入的一个重要特性，它主要用于处理和发送与HTML表单类似的数据，尤其在进行异步文件上传时发挥着关键作用。本篇...
JS FormData对象使用方法实例详解
11-21
**JS FormData对象详解** 在JavaScript中，`FormData`对象是一个非常实用的工具，主要用于处理表单数据，尤其在异步提交表单或上传文件时。它允许开发者方便地构建和操作一组键值对，这些键值对可以是文本或者文件...
wx-formdata:在小程序中使用formdata上传数据，可实现多文件上传
04-30
wx-formdata在小程序中使用formdata上传数据，可实现多文件上传用法跟浏览器中的FormData对象类似引入js文件const FormData = require('./formData.js')new一个FormData对象let formData = new FormData();...
【JS基础】var formdata=new FormData() 【FormData用法详解 】
Milk~每天分享一点点，技术进步一点点
10-27 6483
FormData用法详解 简介 FormData 对象的使用： 1.用一些键值对来模拟一系列表单控件：即将form 中表单元素的 name 与 value 组装成一个 queryString 2.异步上传二进制文件 使用 一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name","laotie"); //通过get
js中的Formdata数据结构
个人博客
10-26 2296
FormData 提供了一种表示表单数据的 key/value 的构造方式，主要方便我们用 XMLHttpRequest 来发送数据。这里我们要与常规的对象数据结构区分开了，FormData的key不是唯一的，它可以存在多个相同的key。因为FormData本身就是为了方便前端与后端进行接口交互的，所以可以直接作为实例化 URLSearchParams的参数，然后转为queryString。FormData也可以快捷的转为常规对象数据，但是对象的key是唯一的，所以FormData重复的数据会丢失。
JS FormData
SeriousLose
04-10 5534
FormData **FormData**接口提供了一种表示表单数据的键值对key/value的构造方式，并且可以轻松的将数据通过[XMLHttpRequest.send()](<https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send>)方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为"multipart/form-data"，它会使用和表单一样的格式。 创建formData对象 ...
JS数据类型——FormData
qq_36493878的博客
07-26 2503
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData 最近做一个需求，后端要求使用form-data的格式传递，我这边使用普通的json格式传递，后端没有验证，导致无法获取正确结果。 应该使用js的FormData对象来当作post的参数。 构造函数 FormData() 创建一个新的 FormData 对象。 方法 FormData.append() 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是
js FormData方法介绍
qq_33309944的博客
03-21 193
js FormData方法介绍
js formData对象
wyw223的博客
01-24 1460
formData对象用于组装表单数据，以键值对的形式存在。 FormData 首先是一个构造函数，用来生成实例 var formdata = new FormData(form); FormData()构造函数的参数是一个表单元素，这个参数是可选的。如果省略参数，就表示一个空的表单，否则就会处理表单元素里面的键值对。 &lt;form id="myForm" name="myForm"&gt; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值