FormData对象的作用及用法

一、js FormData方法介绍

1. 概述

FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。


2. 构造函数

创建一个formData对象实例有几种方式:


1、创建一个空对象实例


var formData = new FormData();

此时可以调用append()方法来添加数据


2、使用已有的表单来初始化一个对象实例


假如现在页面已经有一个表单


<form id="myForm" action="" method="post">

    <input type="text" name="name">名字

    <input type="password" name="psw">密码

    <input type="submit" value="提交">

</form>

我们可以使用这个表单元素作为初始化参数,来实例化一个formData对象


// 获取页面已有的一个form表单

var form = document.getElementById("myForm");

// 用表单来初始化

var formData = new FormData(form);

// 我们可以根据name来访问表单中的字段

var name = formData.get("name"); // 获取名字

var psw = formData.get("psw"); // 获取密码

// 当然也可以在此基础上,添加其他数据

formData.append("token","kshdfiwi3rh");

3. 操作方法

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




3.1 获取值

我们可以通过get(key)/getAll(key)来获取对应的value,


formData.get("name"); // 获取key为name的第一个值

formData.get("name"); // 返回一个数组,获取key为name的所有值

3.2 添加数据

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


formData.append("k1", "v1");

formData.append("k1", "v2");

formData.append("k1", "v1");

 

formData.get("k1"); // "v1"

formData.getAll("k1"); // ["v1","v2","v1"]

3.3 设置修改数据

我们可以通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。


formData.append("k1", "v1");

formData.set("k1", "1");

formData.getAll("k1"); // ["1"]

3.4 判断是否该数据

我们可以通过has(key)来判断是否对应的key值


formData.append("k1", "v1");

formData.append("k2",null);

 

formData.has("k1"); // true

formData.has("k2"); // true

formData.has("k3"); // false

3.5 删除数据

通过delete(key),来删除数据


formData.append("k1", "v1");

formData.append("k1", "v2");

formData.append("k1", "v1");

formData.delete("k1");

 

formData.getAll("k1"); // []

3.6 遍历

我们可以通过entries()来获取一个迭代器,然后遍历所有的数据,


formData.append("k1", "v1");

formData.append("k1", "v2");

formData.append("k2", "v1");

 

var i = formData.entries();

 

i.next(); // {done:false, value:["k1", "v1"]}

i.next(); // {done:fase, value:["k1", "v2"]}

i.next(); // {done:fase, value:["k2", "v1"]}

i.next(); // {done:true, value:undefined}

可以看到返回迭代器的规则


每调用一次next()返回一条数据,数据的顺序由添加的顺序决定


返回的是一个对象,当其done属性为true时,说明已经遍历完所有的数据,这个也可以作为判断的依据


返回的对象的value属性以数组形式存储了一对key/value,数组下标0为key,下标1为value,如果一个key值对应多个value,会变成多对key/value返回


我们也可以通过values()方法只获取value值


formData.append("k1", "v1");

formData.append("k1", "v2");

formData.append("k2", "v1");

 

var i = formData.entries();

 

i.next(); // {done:false, value:"v1"}

i.next(); // {done:fase, value:"v2"}

i.next(); // {done:fase, value:"v1"}

i.next(); // {done:true, value:undefined}

4. 发送数据

我们可以通过xhr来发送数据


var xhr = new XMLHttpRequest();

xhr.open("post","login");

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(formData);

这种方式可以来实现文件的异步上传。


 

二、FormData的实践

1、概述

FormData 对象的使用:

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

一个queryString

2. 异步上传二进制文件。


2、使用

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




let formData = new FormData()

formData.append('user', 'zhang')

获取 formData.get('user')  //zhang

删除 formData.delete('user')

.....

2.使用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>

JS部分

var btn = document.querySelector('[type=button]');

btn.onclick = function () {

    // 文件元素

    var file = document.querySelector('[type=file]');

    // 通过FormData将文件转成二进制数据

    var formData = new FormData();

    // 将文件转二进制

    *****注意2******

    formData.append('upload', file.files[0]);

    *****注意1******

    var xhr = new XMLHttpRequest;

    xhr.open('post', 'file.php');

    // 监听上传进度

    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 () {

            if(xhr.readyState == 4 && xhr.status == 200) {

                    //

            }

    }

}

 


注意1:使用jQuery


 $.ajax({

    url: 'file.php',

    type: 'POST',

    data: formdata,                    // 上传formdata封装的数据

    dataType: 'JSON',

    cache: false,                      // 不缓存

    processData: false,                // jQuery不要去处理发送的数据

    contentType: false,                // jQuery不要去设置Content-Type请求头

    success:function (data) {           //成功回调

        console.log(data);

    }

});

 


注意2:参数


new FormData的参数是一个DOM对象,而非jQuery对象


var formData = new FormData($("#file")[0]);

3、jQuery的参数序列化方法serialize()

序列表表格内容为字符串,用于 Ajax 请求。 


$("form").serialize()

三、补充:关于XMLHttpRequest 对象

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。


尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。


属性

readyState 

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。


5 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义:


状态 名称 属性

0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。

2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。

3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。

4 Loaded HTTP 响应已经完全接收。


readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候,都会触发 onreadystatechange 回调函数。


responseText 

目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。


如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。


如果响应包含了为响应体指定字符编码的头部,就使用该编码。否则,假定使用 Unicode UTF-8。


responseXML 

对请求的响应,解析为 XML 并作为 Document 对象返回。


status 

由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。


statusText 

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说,当状态为 200 的时候它是 “OK”,当状态为 404 的时候它是 “Not Found”。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。


timeout 

超时时间,毫秒数。


方法

abort() 

取消当前响应,关闭连接并且结束任何未决的网络活动。


这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。


getAllResponseHeaders() 

把 HTTP 响应头部作为未解析的字符串返回。


如果 readyState 小于 3,这个方法返回 null。否则,它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回,一行一个头部。每行用换行符 “\r\n” 隔开。


getResponseHeader() 

返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,和响应头部的比较是不区分大小写的。


该方法的返回值是指定的 HTTP 响应头部的值,如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。


open() 

初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。


send() 

发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。


setRequestHeader() 

向一个打开但未发送的请求设置或添加一个 HTTP 请求。


事件监听

4个事件:分别是progress(加载进度),load(请求完成并接受到服务器返回结果),error(请求错误),abort(终止请求)。 

代码:


var oReq = new XMLHttpRequest();

 

oReq.upload.addEventListener("progress", updateProgress);

oReq.upload.addEventListener("load", transferComplete);

oReq.upload.addEventListener("error", transferFailed);

oReq.upload.addEventListener("abort", transferCanceled);

 

oReq.open();



评论 (0)

发表评论

上一篇: Repository 是通过 UserRepository 注入的? 下一篇: 没有下一篇了