FormData的使用

在前台传送数据给后台时可以使用 FormData 对象来进行数据封装。

话不多说，下面直接来看看应该怎么样使用吧：

1、创建 FormData 对象、封装数据和获取数据以及其他 js 端操作

创建空对象和利用表单初始化对象：

// 创建 FormData 对象
var formData = new FormData();
// 或者直接利用已有的 form 表单创建对象，会得到已经封装了 form 表单中内容的对象
var element = document.getElementById('formId');
var formData = new FormData(element);

利用 append(key, value) 封装数据：

// 封装数据, 使用 append(key, value) 进行数据封装
// 封装字符串
formData.append('name', 'lucky1');
// 还可以同一个key后面追加字符串
formData.append('name', 'lucky2');
// 封装数字
formData.append('age', 24);
// 封装文件
formData.append("file", myBlob);
// or
formData.append("file", myBlob, "filename.txt");

利用 get(key)、getAll(key) 获取数据：

// 获取第一个值，返回 'lucky1'
formData.get('name')
// 获取所有值，返回一个数组 ['lucky1', 'lucky2']
formData.getAll('name')

利用 set(key, value) 修改数据：

// 当key不存在时，会添加一条数据，与append等效
formData.set('newField', 'newData');
// 当key存在时，会修改已存在的数据，
// 若当前key存储了一组值，那么会将整个数组修改为新值
formData.set('name', 'newName'); // ['newName']

利用 has(key) 判断数据是否存在：

// return true
formData.has('name');

利用 delete(key) 删除数据：

formData.delete('name');
formData.has('name'); // return false

2、利用 Ajax 发送数据

$.ajax({
    url: url,
    type: 'POST',
    cache: false,
    data: formData,
    processData: false, // 不处理数据，重要
    contentType: false, // 不设置内容类型，重要
    success: function(data) {
        // callBack
    }
});

3、java 后台接受数据

接收数据的方式与表单提交的接收方式一样。

 

---

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects