0%

FormData 对象

发表于 更新于

1. 将 HTML 表单转化为 FormData 对象

1
2
var form = document.getElementById('form'); 
var formData = new FormData(form);

2. 提交表单对象

1
xhr.send(formData);

注意：

1.Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。

2.服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析。

3. 服务器端 formidable 模块解析

1
2
3
4
5
6
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
    res.send(fields);
});

4. FormData 对象的实例方法

1. 获取表单对象中属性的值

1
formData.get('key');

2. 设置表单对象中属性的值

1
2
// 如果设置的表单属性不存在，将会创建这个表单属性；否则覆盖原有值
formData.set('key', 'value');

3. 删除表单对象中属性的值

1
formData.delete('key');

4. 向表单对象中追加属性值

1
2
// set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两值。 
formData.append('key', 'value');

5. FormData 二进制文件上传

1
2
3
4
5
6
7
8
9
10
11
var file = document.getElementById('file')
// 当用户选择文件的时候
file.onchange = function () {
    // 创建空表单对象
    var formData = new FormData();
    // 将用户选择的二进制文件追加到表单对象中
    formData.append('attrName', this.files[0]);
    // 配置ajax对象，请求方式必须为post
    xhr.open('post', 'www.example.com');
    xhr.send(formData);
}

实现文件上传的路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 实现文件上传的路由
app.post('/upload', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 设置客户端上传文件的存储路径
	form.uploadDir = path.join(__dirname, 'public', 'uploads');
	// 保留上传文件的后缀名字
	form.keepExtensions = true;
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		// 将客户端传递过来的文件地址响应到客户端
		res.send({
			path: files.attrName.path.split('public')[1]
		});
	});
});

FormData 文件上传进度展示

1
2
3
4
5
6
7
8
9
// 当用户选择文件的时候
file.onchange = function () {
    // 文件上传过程中持续触发onprogress事件
    xhr.upload.onprogress = function (ev) {
        // 当前上传文件大小/文件总大小 再将结果转换为百分数
        // 将结果赋值给进度条的宽度属性 
        bar.style.width = (ev.loaded / ev.total) * 100 + '%';
    }
}

FormData 文件上传图片即时预览

1
2
3
4
5
6
7
8
xhr.onload = function () {
    var result = JSON.parse(xhr.responseText);
    var img = document.createElement('img');
    img.src = result.src;
    img.onload = function () {
        document.body.appendChild(this);
    }
}