.js利用FormData对象模拟一些表单控件

最新推荐文章于 2023-12-18 09:35:44 发布
最新推荐文章于 2023-12-18 09:35:44 发布
阅读量147 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript js FormData 表单 控件 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meigesir/article/details/84429343
版权

 

 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

想要更详细的了解如何使用FormData对象, 请查看使用FormData对象.

 

详细请看下面转载的地址

转载于：https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData

 

 

meigesir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FormData表单对象
qq_41189709的博客
08-22 269
在开发中，处理表单的场景非常多，提交数据的操作如果还使用传统的方式，先获取表单元素，在提交就会显得非常的繁琐，所以使用FormData对象来处理，就会简单的许多； 方法 解释 new FormData(ele) 创建一个formData对象，传入一个表单元素，返回一个表单对象 get(‘key’) 获取表单中对应name的value值 set(‘key’,‘value’) ...
JS-FormData对象使用
wang704987562的博客
07-14 1万+
前言 FormData 对象用来保存key/value结构的数据，通常用于from传输数据，也可以独立于form使用，用来传输密钥数据。 例子 1.创建FormData对象 var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123..
WCF 解析 HTTP Multipart Form Data
02-19
WCF 是微软力推的通讯框架，它能够以 ASP.NET WebService 的方式实现 RESTful 方式的服务。但是缺陷是目前的版本不支持对 HTTP multipart 格式的自动解析。而不像传统的 ASP.NET WebService 可以自动解析 multipart 中的多媒体数据，并通过访问 Context.Request.Form["name"] 和 Context.Request.Files["name"] 方便地访问。 这份代码在 HttpMultipartFormDataParser (https://github.com/Vodurden/Http-Multipart-Data-Parser) 的基础上，解决了中文乱码的问题。希望给和我一样曾经被这个问题困扰的朋友一些帮助。 关于代码的使用方式，请参见 Vodurden 在 GitHub 上的说明。
FormData详解
weixin_46058921的博客
01-08 5万+
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。 构造函数 FormData()构造函数用于创建一个新的FormData对象。 var formData = new FormData(form)
前端 之 FormData对象浅谈
weixin_45092437的博客
05-14 5347
FormData提供了一种以 `key/value`键值对集合表示表单数据的数据构造方式，通过该方式我们可以将`file`、`blob`等不易传输的数据通过 `ajax` 请求轻松的发送到服务器端。 ​ 当使用`FormData` 对象作为参数时，无需手动设置请求的编码类型，浏览器会自动将请求的编码类型`Content-type`设置为`multipart/form-data`。
前后端传参：掌握FormData并解决form-data类型传参问题
qq_45796592的博客
12-18 1万+
掌握FormData并解决form-data类型传参问题
FormData 介绍和使用
似水流年QC的博客
06-20 2727
FormData 是 JavaScript 中用于处理表单数据的接口。它提供了一种简单的方式来构建和发送表单数据，表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成这个过程，构造或编辑表单的键值对，然后通过脚本发送给服务器。浏览器原生提供了 FormData 对象来完成这项工作。
JavaScript程序设计-FormData对象的使用.pdf
11-02
1. **模拟表单控件**：FormData对象允许开发者创建一系列的键值对，这些键值对可以模拟HTML表单控件的结构，将表单元素的name和value组合成查询字符串。 2. **异步文件上传**：FormData的一个显著优点是支持异步...
js使用formData实现批量上传
01-21
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...
JS中使用FormData上传文件、图片的方法
11-27
利用FormData对象，可以通过js用一些键值对来模拟一系列表单控件，可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比，使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 ...
jquery使用FormData实现异步上传文件
01-19
考虑一个常见的用户上传头像的场景： ... 选中图片并确认后直接上传图片 实现这个功能，需要使用<...利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRe
jQuery Ajax 上传文件处理方式介绍(推荐)
01-21
AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。...利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的
FormData使用方法详解
bigcarp的专栏
03-18 5576
https://www.jianshu.com/p/e984c3619019 FormData的主要用途有两个： 1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name.
js中的Formdata数据结构
个人博客
10-26 2284
FormData 提供了一种表示表单数据的 key/value 的构造方式，主要方便我们用 XMLHttpRequest 来发送数据。这里我们要与常规的对象数据结构区分开了，FormData的key不是唯一的，它可以存在多个相同的key。因为FormData本身就是为了方便前端与后端进行接口交互的，所以可以直接作为实例化 URLSearchParams的参数，然后转为queryString。FormData也可以快捷的转为常规对象数据，但是对象的key是唯一的，所以FormData重复的数据会丢失。
new FormData() - FormData对象的作用及用法
热门推荐
AlbenXie的博客
08-27 8万+
一、js FormData方法介绍 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数 创建一个formData对象实例有几种方式： 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用append()方法来添加数...
前端 之 FormData对象进阶
weixin_45092437的博客
05-19 2674
本篇博客主要包含以下内容： 1、FormData对象、JSON字符串、key=value字符串 三种参数形式对比。2、对FormData对象中的数据进行过滤。3、FormData对象结合同步token预防CSRF攻击。4、FormData对象结合input实现选择文件夹，批量上传文件。5、FormData对象结合dataTransfer实现拖拽文件夹，批量上传文件。
FormData 解析
weixin_36723038的博客
01-28 4308
FormData 很多时候，在 post 提交数据时我们常采用 application/json、application/x-www-form-urlencoded 等类型，也确实能够覆盖到大部分的场景，但是有一些场景下，比如文件上传的时候，就不算是好的解决方案了，application/json 作为请求头 Content-Type 字段值时，表示告知服务端参数是序列化后的 JSON 字符串，所以一般在传参时都会用 JSON.stringify 序列化一下，且浏览器对 JSON.stringify API
FormData简介
qianfeng_dashuju的博客
08-13 1672
​FormData 简单介绍 FormData是Ajax 2.0对象用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。XMLHttpRequest Level 2提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作。 我们打印这个构造函数看一眼 ƒ FormData() arguments: null caller: null length: 0 name: "FormData" prototype: FormD.
1111111111111111111111
最新发布
08-13
1111111111111111
new FormData( document.getElementById( formData.append 没有数据
07-28
引用\[1\]:在这段代码中，使用了FormData对象来创建一个表单数据对象。FormData对象可以用来将表单数据序列化成键值对，以便通过AJAX发送到服务器。在这段代码中，通过document.getElementById("upfile")获取到了id为"upfile"的表单元素，然后使用FormData的append方法将表单数据添加到FormData对象中。接着，通过$.ajax方法发送了一个POST请求到"controller/shopcar.php"的URL，并将FormData对象作为请求的数据发送到服务器。在成功回调函数中，根据服务器返回的结果进行相应的处理。如果返回的结果的state属性为"ok"，则弹出"提交成功！"的提示，并跳转到"seeFood.html?id="+id的URL；否则，弹出"提交失败！"的提示。如果FormData对象中没有数据，则会弹出"请先选择"的提示。 根据你的问题，你提到了new FormData(document.getElementById())和formData.append，但是没有提供具体的数据。请提供具体的数据，以便我能够更好地回答你的问题。 #### 引用[.reference_title] - *1* [前端关于FormData(document.getElementById("upfile"))例子](https://blog.csdn.net/xiao_qing_ge/article/details/103294433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值