formdata对象

最新推荐文章于 2024-11-17 01:39:39 发布

原创最新推荐文章于 2024-11-17 01:39:39 发布 · 198 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #node.js

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML5中的FormData对象，包括其作用、基本使用方法、实例方法及文件上传进度提示的实现。FormData对象能够模拟HTML表单，用于异步上传二进制文件，简化了表单数据的处理。

文章目录

FormData 对象的作用

1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
2.异步上传二进制文件。

FormData对象的基本使用

准备HTML表单

<form action="post" id="form">
        <input type="text" name="username"/>
        <input type="password" name="password"/>
        <input type="button" name="button"/>
 </form>

2.将HTML表单转化formData对象

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

3.提交表单对象

xhr.send(formData);

FormData对象的实例方法

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

formData.delete('key');

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

formData.get('key');

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

formData.set('key','value');

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

formData.append('key','values')

注意：set方法与append方法的区别是，在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值。

FormData文件上传进度提示

客户端的核心代码：

file.onchange = function () {
            //文件上传过程中持续触发onprogress事件
            xhr.upload.onprogress = function (ev) {
                //当上传文件大小/文件总大小 再将结果转换为百分数
                //将结果赋值给进度条的宽度属性
                bar.style.width = (ev.loaded / ev.total) * 100 + '&';
            }
        }

服务端实现文件上传的路由

import formidable from 'Formidable'
//实现文件上传的路由
app.post('/upload',(req,res) => {
    //创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    //设置客户端上传文件的存储路径
    form.uploadDir = path.jonn(__dirname,'public','upload');
    //保留上传文件的后缀名字
    form.keepExtensions = true;
    //解析客服端传递过来的fromdata对象
    form.parse(req,(error,fields,files) => {
        //将客户端传递过来的文件地址响应到客户端
        res.send(files.attrName.path);
    });
});