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

时间：2023-03-09 23:43:28
【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()

相关文章