位置: IT常识 - 正文

FormData详解(formdata方法)

编辑:rootadmin
FormData详解

推荐整理分享FormData详解(formdata方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:formdata用法详解,formdata用法,formdataparam,formdata方法,form-data,formdata.append(),formdata enctype,formdata方法,内容如对您有帮助,希望把文章链接给更多的朋友!

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data ,则会使用表单的 submit() 方法来发送数据,从而发送数据具有同样形式。

构造函数

FormData()构造函数用于创建一个新的FormData对象。

var formData = new FormData(form)

form可选

一个HTML 上的``表单元素——当指定了,这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。

例子

下面的代码将创建一个空的FormData对象:

var formData = new FormData(); // 当前为空// 你可以使用FormData.append来添加键/值对到表单里面;formData.append('username', 'yang');

或者你可以使用可选的form参数来创建一个带预置数据的FormData对象:

<form id="myForm" name="myForm"> <div> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> </div> <div> <label for="useracc">Enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">Upload file:</label> <input type="file" id="userfile" name="userfile"> </div><input type="submit" value="Submit!"></form>

注意: 所有的输入元素都需要有name属性,否则无法访问到值。

vr formData = new FormData($("#myForm")[0]);var name = formData.get("username"); // 获取名字var psw = formData.get("useracc"); // 获取账户// 当然也可以在此基础上,添加其他数据formData.append("token","kshdfiwi3rh");APIFormData.append()

通过append(key,value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则追加到数据末尾

FormData.set和 append() 的区别在于,如果指定的键已经存在, FormData.set 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。

这个方法有两个版本:一个有两个参数的版本和一个有三个参数的版本。

// 语法// name: value中包含的数据对应的表单名称// value: 表单的值。可以是USVString 或 Blob (包括子类型,如 File)。//filename (可选): 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候, Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。formData.append(name, value);formData.append(name, value, filename);// 示例var formData = new FormData(); // Currently empty// 你可以通过 FormData.append 往对象里加入键值对:formData.append('username', 'Chris');formData.append('userpic', myFileInput.files[0], 'chris.jpg');// 跟常规表单数据一样,你可以使用同一个名称添加多个值 。例如 (为了与PHP命名习惯一致在名称中添加了[]):formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');formData.getAll("userpic[]"); // [myFileInput1.files[0], myFileInput2.files[0]]

这项技术使得多文件上传的处理更加简单,因为所得数据结构更有利于循环。

FormData.get/getAll()FormData详解(formdata方法)

get()方法用于返回FormData对象中和指定的键关联的第一个值,如果你想要返回和指定键关联的全部值,那么可以使用getAll()方法。

getAll()方法会返回该 FormData 对象指定 key 的所有值。

// 语法// name: 将要获取值的键名// 返回值: 包含值的FormDataEntryValue (en-US)。formData.get(name);// 例子var formData = new FormData();// 使用FormData.append方法添加两个数据:formData.append('username', 'Chris');formData.append('username', 'Bob');// 获取key为name的第一个值formData.get('username'); // "Chris"// 返回一个数组,获取key为name的所有值formData.getAll("username"); // ["Chris",'Bob']FormData.delete()

delete() 方法会从 FormData 对象中删除指定键,即 key,和它对应的值,即 value

// 语法// name: 要删除的键(Key)的名字formData.delete(name);// 例子var formData = new FormData(myForm);formData.delete('username');FormData.set()

给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

// 语法// name: 字段名称// value:字段的值,如果是传入两个参数的方式,那么该值是一个 USVString,如果不是,将被转成一个字符串。如果是传入三个参数的方式,那么该值将是一个布尔值(Blob),文件(File),或者一个 USVString,如果不是,将被转成一个字符串。// filename(可选): 当第二个参数传递的是一个blob对象(Blob)或者file对象(File),filename参数就代表传给服务端的文件名(一个USVString)。Blob 对象的默认文件名是 "blob"。// 该方法有两种使用方式,一个是传入两个参数,一个是传入三个参数。formData.set(name, value);formData.set(name, value, filename);// 示例var formData = new FormData(); // Currently emptyformData.set('username', 'Chris');formData.set('userpic', myFileInput.files[0], 'chris.jpg');FormData.has()

has()方法会返回一个布尔值,表示该FormData对象是否含有某个key

// 语法formData.has(name);// 示例var formData = new FormData();formData.has('username'); // falseformData.append('username', 'Chris');formData.has('username'); // trueFormData.entries()

FormData.entries() 方法返回一个 iterator对象 ,此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象;value是一个 USVString , 或者 Blob对象。

// 语法formData.entries();// 示例// Create a test FormData objectvar formData = new FormData();formData.append('key1', 'value1');formData.append('key2', 'value2');// 每调用一次next()返回一条数据,数据的顺序由添加的顺序决定// 返回的是一个对象,当其done属性为true时,说明已经遍历完所有的数据,这个也可以作为判断的依据// 返回的对象的value属性以数组形式存储了一对key/value,数组下标0为key,下标1为value,如果一个key值对应多个value,会变成多对key/value返回var i = formData.entries();i.next(); // {done:false, value:["key1", "value1"]}i.next(); // {done:fase, value:["key2", "value2"]}i.next(); // {done:true, value:undefined}// 方式二for(var pair of formData.entries()) { console.log(pair[0]+ ', '+ pair[1]);}key1, value1key2, value2FormData.keys()

FormData.keys() 该方法返回一个迭代器(iterator),遍历了该 formData 包含的所有key ,这些 key 是 USVString 对象。

// 语法// 返回值:返回一个迭代器( iterator)formData.keys();// 示例// 先创建一个 FormData 对象var formData = new FormData();formData.append('key1', 'value1');formData.append('key2', 'value2');// 输出所有的 keyfor (var key of formData.keys()) { console.log(key);}key1key2FormData.values()

FormData.values() 方法返回一个允许遍历该对象中所有值的 迭代器 。这些值是 USVString 或是Blob 对象。

// 语法// 返回值:返回一个迭代器formData.values();// 示例//创建一个FormData测试对象var formData = new FormData();formData.append('key1', 'value1');formData.append('key2', 'value2');//显示值for (var value of formData.values()) { console.log(value);}value1value2FormData 实践

FormData 对象的使用:

用一些键值对来模拟一系列表单控件:把 form 中所有表单元素的 name 与 value 组装成一个 queryString;

异步上传二进制文件;

FormData 对象的操作方法,全部在原型中本身没任何的属性及方法

使用 FormData 对象发送文件

<!--HTML部分--><form action=""><label for="">姓名: <input type="text" name="name"></label><label for="">文件:<input id="file" type="file" name="file"> </label> <label for=""><input type="button" value="保存"></label></form>

 原生ajax

//原生js上传文件//获取按钮var btn = document.querySelector('[type=button]');//绑定事件btn.onclick = function () { // 文件元素 var file = document.querySelector('[type=file]'); // 通过FormData将文件转成二进制数据 var formData = new FormData(); // 将文件转二进制 formData.append('upload', file.files[0]);//创建XMLHttpRequest,用这个来发送数据 var xhr = new XMLHttpRequest; /*初始化HTTP请求参数(请求方式,url,是否同步)*/ xhr.open('post', 'file.php');/*xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");设置请求头的contentType*/ // 监听上传进度 xhr.upload.onprogress = function (ev) { // 事件对象 // console.log(ev); var percent = (ev.loaded / ev.total) * 100 + '%'; console.log(percent); progress.style.width = percent; } xhr.send(formData); xhr.onreadystatechange = function () { //status状态为200 表示请求成功,readystate为4表示对象传递完毕或者准备就绪 if(xhr.readyState == 4 && xhr.status == 200) { } }}

使用 jQuery

//绑定提交事件function upload() { //获取form表单元素 var f = document.getElementById("myForm"); //使用表单元素来构造FromData var myform = new FormData(f); $.ajax({ url: "/Library/test/upload", type: "post", dataType: "json", data: myform, cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success: function (data) { console.log(data); } });}
本文链接地址:https://www.jiuchutong.com/zhishi/299154.html 转载请保留说明!

上一篇:yolov5_reid【附代码,行人重识别,可做跨视频人员检测】(yolov5 libtorch)

下一篇:【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind(javascript中文手册)

  • 怎样提升微博话题的关注度(如何提升一个微博账号的影响力和话语权)

    怎样提升微博话题的关注度(如何提升一个微博账号的影响力和话语权)

  • 携程专人抢票怎么关(携程专人抢票怎么退票)

    携程专人抢票怎么关(携程专人抢票怎么退票)

  • 华为黑名单来电提示音怎么改(华为手机来电显示私人号码)

    华为黑名单来电提示音怎么改(华为手机来电显示私人号码)

  • 华为nova5怎么开不了机(华为nova5怎么开空调遥控器)

    华为nova5怎么开不了机(华为nova5怎么开空调遥控器)

  • 华为手机怎么屏幕录制(华为手机怎么屏幕变成黑白色了)

    华为手机怎么屏幕录制(华为手机怎么屏幕变成黑白色了)

  • 淘宝客pid怎么获取(如何获得淘宝客pid)

    淘宝客pid怎么获取(如何获得淘宝客pid)

  • 苹果手机充电总是一响一响的(苹果手机充电总是反复断开)

    苹果手机充电总是一响一响的(苹果手机充电总是反复断开)

  • 电脑显示器模糊是坏了吗(电脑显示器模糊怎么调)

    电脑显示器模糊是坏了吗(电脑显示器模糊怎么调)

  • 华为p40的HD怎么关(华为p40的hd哪里设置)

    华为p40的HD怎么关(华为p40的hd哪里设置)

  • 华为智慧语音是什么意思(华为智慧语音是谁都能控制吗)

    华为智慧语音是什么意思(华为智慧语音是谁都能控制吗)

  • 抖音蓝v可以取消吗(抖音蓝v可以取消吗钱退吗)

    抖音蓝v可以取消吗(抖音蓝v可以取消吗钱退吗)

  • 手机无法连接wifi,别的手机就可以(手机无法连接wifi是怎么回事)

    手机无法连接wifi,别的手机就可以(手机无法连接wifi是怎么回事)

  • 怎样下载万能钥匙到手机(怎样下载万能钥匙wifi)

    怎样下载万能钥匙到手机(怎样下载万能钥匙wifi)

  • 手机抢不了红包怎么回事(手机抢不了红包是什么原因呢)

    手机抢不了红包怎么回事(手机抢不了红包是什么原因呢)

  • 华为畅享10s是快充吗(华为畅享10s有没有快充功能)

    华为畅享10s是快充吗(华为畅享10s有没有快充功能)

  • 苹果手机下载的软件未受信任怎么办(苹果手机下载的音乐在哪个文件夹)

    苹果手机下载的软件未受信任怎么办(苹果手机下载的音乐在哪个文件夹)

  • 微信退群文件还能看吗(群聊退出了文件还在吗)

    微信退群文件还能看吗(群聊退出了文件还在吗)

  • 韩剧tv在哪评分(韩剧tv怎么看评论)

    韩剧tv在哪评分(韩剧tv怎么看评论)

  • 苹果11相册怎么按时间排列(苹果11相册怎么抠图片)

    苹果11相册怎么按时间排列(苹果11相册怎么抠图片)

  • 济南5g什么时候出来(济南5g基站什么时候覆盖)

    济南5g什么时候出来(济南5g基站什么时候覆盖)

  • 导航窗格复选框在哪里(导航窗格怎么复制)

    导航窗格复选框在哪里(导航窗格怎么复制)

  • OPPO手机桌面怎样设置时钟(oppo手机桌面怎么恢复原来的桌面)

    OPPO手机桌面怎样设置时钟(oppo手机桌面怎么恢复原来的桌面)

  • soul会显示在线吗(soul显示在线状态但也可能人不在对吗)

    soul会显示在线吗(soul显示在线状态但也可能人不在对吗)

  • Vue|获取表单数据(vue获取value值)

    Vue|获取表单数据(vue获取value值)

  • 【人工智能与深度学习】监督方法的成功故事: 前置训练(人工智能 深度)

    【人工智能与深度学习】监督方法的成功故事: 前置训练(人工智能 深度)

  • 数据分析实战<一>脑电(EEG)分析(数据分析实战)

    数据分析实战<一>脑电(EEG)分析(数据分析实战)

  • 增值税发票认证平台进不去什么原因
  • 啥是完税凭证
  • 发票系统口令锁定
  • 烟丝是消费税的征收范围
  • 企业房产税每年交几次
  • 本期缴纳前期应纳税额
  • 代账公司需要做报表吗
  • 二手房交易税费最新规定
  • 企业统计报表怎么写
  • 中小企业所得税优惠政策有哪些
  • 融资租赁的销项税额抵减
  • 个人所得税补交税
  • 营改增后电力行业非正常损失怎么做会计处理?
  • 公积金抵扣个税上限
  • 发票已勾选未确认
  • 发票作废了还能查验吗
  • 建筑行业一般纳税人税率是多少
  • 发生工伤事故先怎么办
  • 一级代理价格
  • 银行存款账不平怎么办
  • 税没申报不能领发票吗
  • 协会收取会员单位的会务费怎么做账
  • 现在还有短期投资这个科目吗
  • 王者荣耀中墨子的最强出装
  • 电脑上网速度慢的原因及解决方法
  • 债权债务重组公司
  • 个人劳务费怎么计算
  • 赎回理财产品的利息怎么做账
  • mac 系统查看
  • 贷款和应收款项应采用实际利率法
  • 会计账簿登记错误怎么办
  • 小狐狸k
  • php框架symfony
  • 购买二手车要缴税吗
  • 配件买不到
  • 净亏损会影响所有者权益吗
  • 支付运费的会计处理
  • 冰川洞洞打法
  • 人类记忆存储在哪
  • 股东从公司账户上转钱违法吗
  • java 代码简洁
  • 确认收入时还没交税
  • 多计提的个税能退回给员工吗
  • mysql日志文件在哪
  • mysql中的null值和空
  • 异地成立分公司的流程和要求
  • 长期股权投资与其他权益工具投资的区别
  • 结构性存款现金流量表流入里放在哪里
  • 跨年租赁费会计分录
  • 贸易公司退税计算方法选哪一种
  • 内账税金如何做分录
  • 留抵税额和待抵扣进项税额区别
  • 管家婆里面的记账凭证怎么做?
  • 报销没有消费凭据怎么办
  • 来料加工的特点包括
  • 电子钥匙在线服务
  • 初中学历学会计难不难
  • ios 数据库版本升级
  • win7/win8.1/win10系统下如何配置Java环境变量 Java环境变量的配置教程介绍
  • centos怎么执行文件
  • Kali(debian) Too many open files 错误处理办法
  • Win8系统网络SSID怎么设置?Win8设置网络SSID的方法
  • macbook快捷操作大全
  • linux系统加载网卡驱动
  • win10 win8.1
  • Win10 Mobile 10586.312提前体验
  • 邮件传输过程中都使用哪些协议
  • 升级win10系统后安装谷歌打不开
  • win7取消关机命令
  • linux创建.c
  • linux怎么查看挂载点
  • [置顶]马粥街残酷史
  • 如何让批处理文件运行不显示
  • 从零开始学什么
  • jQuery xml字符串的解析、读取及查找方法
  • jquery轮播图自动播放
  • 河南省地方税务局房产税管理办法
  • 无房怎么办
  • 土地使用税征收时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设