如何通过ajax实现同时上传文件及普通表单 - 一文了解FormData

如何通过ajax实现同时上传文件及普通表单 - 一文了解FormData

formData 使用说明

01 - 什么是formData

使用键值对的方式模拟表单控件，可以使用XML HttpRequest的send()方法来异步提交表单数据。

02 - 为什么使用formData

我们在进行数据交互时， 一般会采取两种方式，1）表单提交的方式 2）ajax请求的方式

1）表单提交的方式，使用表单提交的方式可以提交表单中file文件（form表单的编码方式需要设置为 enctype=“multipart/form-data”）

2. ajax请求方式，在使用ajax请求时，一般通过serialize方法对表单数据进行序列化后进行提交。但是serialize方法只能对普通表单控件进行序列化，但是对流文件无法序列化。即无法实现文件上传

而formData接口可以将同一个表单中的普通控件和文件控件同时上传

03 - 如何使用formData

Constructor

FormData()

用于新建一个formData对象

代码示例

let formData = new FormDta();

Method

formData.append()

该方法向FormData对象添加一个新值到已存在的键中，如果该键不存在，则会创建一个新键。

语法
append方法有两个版本：一个是含有两个参数的版本，一个是含有三个参数的版本

    formData.append(name , value);
    formData.append(name , value , fileName);

参数说明：

**name**：表单控件的名称，即name值
**value**：表单控件的值，即value值
**fileName（可选）**：传递给服务器一个文件名称 ， 当Blob或file类型作为第二个参数时，Blob默认值为“blob”。File默认的值为文件名

代码示例

var formData = new FormData();
formData.append("userName","july");
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

FormData.delete()

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

语法

formData.delete(name)

参数说明

name：眼删除的键的名称（key）值

代码示例

formData.delete('username');

FormData.entries()

The 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');

// Display the key/value pairsfor(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

// 执行结果
key1, value1
key2, value2

formData.get()

用于返回formData对象中指定键值的第一个值，注意：只会返回第一个值，如果该键值存在多个值并想要获取全部值，使用getAll方法

语法

formData.get(name)

参数

name：想要获取值的键名

代码示例

formData.append('username', 'Chris');
formData.append('username', 'Bob');
formData.get('username'); // Returns "Chris"

formData.getAll()

用于返回指定键名的全部值

语法

formData.getAll(name)

参数

name:所对应的键名

代码示例

formData.append('username', 'Chris');
formData.append('username', 'Bob');

formData.getAll('username');// ['Chris' , 'Bob'] ;

formData.has()

用于判断formData对象是否含有某个键名

语法

formData.has(name);

参数说明

name:指定的键名

formData.set()

用于向formData对象中设置某个key键的新值。注意：set方法会覆盖之前的值从而改变key的值，与append不同，append是不管之前的值是什么都不会影响，直接插入新值

语法

formData.set(name,value); // 第一种语法，还有两个参数
formData.set(name , value , fileName); // 第二种语法，含有三个参数

参数说明

name：需要设置新值的key键名
value:需要设置的新值
fileName（选填）：如果blob或file做第二个参数的时候，fileName会默认传递文件名称到服务器

formData.keys()

获取到能够遍历的所有key值

语法

formData.keys()

代码示例

// 先创建一个 FormData 对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 输出所有的 key
for (var key of formData.keys()) {
   console.log(key); 
}

formData.values()

获取到所有的value值

语法

formData.values()

代码示例

//创建一个FormData测试对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

//显示值
for (var value of formData.values()) {
   console.log(value); 
}

// 输出结果
value1
value2

04 - 使用formData应注意些什么

1）使用form表单初始化formData对象上传文件

HTML代码

<form id="form" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

javaScript代码

$.ajax({
    url: '/uploadFle',
    type: 'POST',
    cache: false, // 设置为false，不需要从浏览器缓存，默认为true
    data: new FormData($('#form')[0]),
    processData: false, // 对数据的处理方式，默认为true，会将数据处理为对象格式
    contentType: false, //当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。
})

注意事项
1 - form 必须设置 enctype为"multipart/form-data"
2 - ajax 请求的cache属性设置为false ， 避免从浏览器读取缓存
3 - ajax请求的processData属性设置为false，默认情况下为true，会将数据处理为对象格式
4 - ajax请求的contentType属性设置为false，默认情况下为"application/x-www-form-urlencoded",该格式支持大多数数据的上传

2）通过input控件上传文件

javaScript对象

let formData = new FormData();
formData.append("file" , $("#file")[0].files[0]);
$.ajax({
    url: '/uploadFile',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
})