ajax-FormData使用

最新推荐文章于 2024-04-28 04:01:16 发布

云兮书嗣

最新推荐文章于 2024-04-28 04:01:16 发布

阅读量375

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/m0_37985967/article/details/115612237

版权

Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

FormData对象的使用

1.准备表单
在这里插入图片描述
2.将html表单转换为formData对象

在这里插入图片描述
3.提交表单对象

FormData对象的实例方法

1.获取表单对象中属性的值
formData.get(‘key’)
2.设置表单对象中属性的值
formData.set(‘key’, ‘value’)
3.删除表单对象中属性的值
formData.delete(‘key’)
4.向表单对象中追加属性值
formData.append(‘key’, ‘value’);
注意：set方法与append方法的区别是，在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建普通的html表单 -->
    <form action="" id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="button" id="btn" value="提交">
    </form>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //获取表单
        var form = document.getElementById('form');
        //为按钮添加点击事件
        btn.onclick = function(){
            //将普通的html表单转换为表单对象
            var formData = new FormData(form);
            //创建ajax对象
            var xhr= new XMLHttpRequest();
            //对ajax对象进行配置
            xhr.oepn('post', 'http://localhost:3000/formData');
            //发送ajax请求
            xhr.send(formData);
            //监听xhr对象下面的onload事件
            xhr.onload = function(){
                //对象http状态码进行判断
                if(xhr.status == 200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
</html>

app.post('/formData', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		res.send(fields);
	});
});

在这里插入图片描述
FormData二进制文件上传

FormData文件上传进度显示

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