【H5】-- FormData用法介绍以及实现图片/文件上传--【XUEBIG】

 

一、概述

FormData 对象的使用：

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

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

二、使用

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

let formData = new FormData()
formData.append('user', 'zhang')
获取 formData.get('user') //zhang
删除 formData.delete('user')
.....

2. 构造函数

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

1、创建一个空对象实例

var formData = new FormData();

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

3. 操作方法

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

key	value
k1	[v1,v2,v3]
k2	v4

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}

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

1. 每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
2. 返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
3. 返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

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

 

例子：

1.使用formdata来创建一个对象实例

 

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

//js部分
//创建一个表单数据对象
var formData = new FormData();
 
var goods_name = $("#name");
var goods_img = $("#file");
var goods_imgs = $("#files");
 
//使用append方法将数据提交到formdata中
formData.append("goodsName",goods_name.val());
formData.append("goodsImg",goods_img[0].files[0])
 
//使用便利遍历将多个文件/图片遍历出来
for(var i=0;i<goods_imgs[0].files.length;i++){
    formData.append("goodsImgs",goods_imgs[0].files[i])
}

 

上传

　1、原生上传

　　此时的 Content-Type应该为multipart/form-data，原生方式的时候不需要添加也可以，浏览器会自动完成。

var httpDemo = new XMLHttpRequest(); //创建httprequest对象
httpDemo.open('post','/upload',true); //初始化请求 post方式 接口 异步
httpDemo.onload = function(e){
　　console.log(e);
}
httpDemo.send(formData); //发送请求

 

　2、$.ajax()

　使用jquery上传有两个配置需要注意：

　　processData会默认将data转化为字符串，所以需要配置为false，不进行处理。

　　contentType默认值为application/x-www-form-urlencoded; charset=UTF-8'。上传文件时，Content-Type应该为multipart/form-data。但是设置为multipart/form-data也还是会失败。只有设置为false才可以。

$.ajax({
    url : '/upload',
    type:'POST',
    data: formData,
    processData:false,
    contentType:false,
    success:function(data,textStatus,jqXHR){
            },
    error:function(jqXHR,textStatus,error){
            }
})

 

　3、vue-axios上传

　　只需要配置header即可。

headers: {
'Content-Type': 'multipart/form-data'
},

注意：参数

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

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

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

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

$("form").serialize()