关闭

FormData对象的使用

时间: 2019-01-21阅读: 4491标签: 对象

一、概述

FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。

作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的namevalue组装成一个queryString;2.异步上传二进制文件

与普通Ajax相比,使用FormData的最大优点:可以异步上传二进制文件。


二、使用

1.创建FormData对象方式

 1).let formdata = new FormData();  创建一个空的FormData对象,可以使用formdata.append(key,value)来添加数据

 2).let formdata = new FormData(form);  使用已有的表单来初始化一个FormData对象。

<form id="upload" method="post" action="">
  <input type="text" name="username" value=""/>
  <input type="password" name="paw" value=""/>
  <input type="button" value="提交"/>
</form>

//获取一个form表单对象
let form = document.getElementById("form");
//用这个表单对象来初始化FormData对象
let formdata = new FormData(form);
//我们可以通过name来访问表单中的字段
formdata.get("username");  //获取username的值
formdata.get("pwd");       //获取pwd的值
//我们也可以添加数据
formdata.append("token","fegahgag54");


2.数据形式

    首先,我们要明确FormData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value。如果使用表单初始化FormData对象,每一个表单字段对应一条数据,他们的name属性值对应key值,value属性值对应value值。



3.操作方法

3.1获取数据   formdata.get(key)

formdata.get("username");  //获取key为username的第一个值
formdata.getAll("username"); //获取key为username的所有值,返回一个数组

3.2添加数据   formdata.append(key,value)

formdata.append("k1","v1");
formdata.append("k1","v2");
formdata.append("k2","v2");

formdata.getAll("k1");  //["v1","v2"]
formdata.get("k2");  //"v2"

3.3设置/修改数据   formdata.set(key,value)如果key不存在则新增一条数据,如果存在,则会修改对应的value值。

formdata.append("k1","v1");
formdata.set("k1","v2");
formdata.get("k1");  //"v2"

3.4判断是否存在某条数据   formdata.has(key),存在返回true,不存在返回false。

formdata.append("k1","v1");
formdata.has("k1");  //true
formdata.has("k2");  //false

 3.5删除数据   formdata.delete(key);

formdata.append("k1","v1");
formdata.delete("k1");
formdata.get("k1");  //null

3.6遍历 通过entries()或values()来获取一个遍历器

formdata.append("k1","v1");
formdata.append("k2","v2");
for(let [key,value] of formdata.entries()){
  console.log(key +":"+ value)
}
输出:
"k1:v1"
"k2:v2"

formdata.append("k1","v1");
formdata.append("k2","v2");
for(let value of formdata.values()){
  console.log(value)
}
输出:
"v1"
"v2"

  4.发送数据(上传文件不刷新页面)

<input type="file" id="upload"/>
<input type="button" id="upload-btn" value="上传"/>

let btn = document.getElementById("upload-btn");
btn.onclick = function(){
    let file = document.getElementById("upload");
    let formdata = new FormData();
    formdata.append("file",file.files[0]);
    fetch("https://www.baidu.com",{ 
method:'POST',
body:formdata
}).then(d=>{
console.log("result is" + d);
alert("上传成功");
})
}

三、浏览器兼容性



来自:https://www.cnblogs.com/crackedlove/archive/2019/01/19/10292867.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1849

关闭

js中的Arguments对象

arguments 是一个对应于传递给函数的参数的类数组对象。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处

Js ES6 Promiss对象

Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的。假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果使用Node.js,就需要一层层嵌套下去

JS遍历对象的几种方法

从方法名称来分析,应该是返回的是对象自身属性名组成的数组,那和 Object.keys() 方法不就一样了吗

JS一切皆对象理解

Function也是一个函数,函数是一种对象,也有__proto__属性。既然是函数,那么它一定是被Function创建。所以——Function是被自身创建的。所以它的__proto__指向了自身的Prototype。

如何禁止JavaScript对象重写?

由于JavaScript的灵活性,我们可以轻易地重写(override)一些于其他人定义的对象(object)。换句话说,任何人都可以重写我们所定义的对象。这是一个非常强大的特性,许多开发者都有兴趣试试,来拓展或者修改某些对象的行为。

JavaScript 判断对象中是否有某属性

判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。一点( . )或者方括号( [ ] )、二in 运算符、三hasOwnProperty()。三种方式各有优缺点,不同的场景使用不同的方式,有时还需要结合使用

JavaScript arguments 对象详解

arguments 是一个类数组对象。代表传给一个function的参数列表。乍一看,结果是个数组,但并不是真正的数组,所以说 arguments 是一个类数组的对象(想了解真正数组与类数组对象的区别可以一直翻到最后)。

js内置对象

在js里,一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量,所有变量都有对象的性质。JS中常用的内置对象:Array对象、Date对象、正则表达式对象、string对象、Global对象

JS声明对象时属性名加引号与不加引号的问题

JS声明对象时属性名加引号与不加引号的问题,一般情况下属性名加引号和不加引号是都可以的,效果是一样的。如果属性名是数字,则必须用“”包围,并且用 [] 方括号访问。

利用 WeakMap 对 Vue 新建数组中的对象赋予 :key

在 Vue 中,对组件进行循环都需要加入key以便“就地复用”,可是在某些情况下,我们需要新建多个对象,而这些对象不是从后端获取到的,而是前端生成的,没有唯一值,且 Vue 目前版本只允许字符串,数字作为组件的 key

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!