Ajax学习--FormData对象

1.FormData 对象的作用

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

2.FormData 对象的使用

  • 1.准备 html 表单
<form id="form">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <input type="button"/>
</form>
  • 2.将 HTML 表单转化为 formData 对象
var form = document.getElementById('form'); 
var formData = new FormData(form);
  • 3.提交表单对象
xhr.send(formData);

注意:
1.Formdata 对象不能用于 get 请求,因为对象需要被传递到 send 方法中,而 get 请求方式的请求参数只能放在请求地址的后面。
2.服务器端 bodyParser 模块不能解析 formData 对象表单数据,我们需要使用 formidable 模块进行解析。

  • 演示
    服务器端代码
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建web服务器
const app = express();
app.post('/formData', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		res.send(fields);
	});
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

客户端代码

<body>
	//准备 HTML 表单
    <form action="" id="form">
        <input type="text" name="usernam">
        <input type="password" name="password">
        <input type="button" name="" id="btn" value="提交">
    </form>
    <script>
        var btn = document.getElementById('btn');
        var form = document.getElementById('form');
        //添加点击事件
        btn.onclick = function () {
        	//将 HTML 表单转化为 formData 对象
            var formData = new FormData(form);
            var xhr = new XMLHttpRequest();
            xhr.open('post','http://localhost:3000/formData');
            //提交表单对象
            xhr.send(formData);
            xhr.onload = function () {
                if(xhr.status = 200){
                    console.log(xhr.responseText);
                }
              }
        }
    </script>
</body>

提交表单后打印结果
在这里插入图片描述

3.FormData 对象的实例方法

FormData 对象的实例方法有很多,可以在控制台输出formData对象看到它的实例对象,以下列举四个常用的

在这里插入图片描述

  • 1.获取表单对象中属性的值
formData.get('key');
  • 2.设置表单对象中属性的值
formData.set('key', 'value');
  • 3.删除表单对象中属性的值
formData.delete('key');
  • 4.向表单对象中追加属性值
formData.append('key', 'value');

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

4.FormData 二进制文件上传

  • 二进制文件上传客户端核心代码
			<input type="file" id="file"/>
             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);
             }
  • FormData 文件上传进度展示
             // 当用户选择文件的时候
             file.onchange = function () {
                 // 文件上传过程中持续触发onprogress事件
                 xhr.upload.onprogress = function (ev) {
                     // 当前上传文件大小/文件总大小 再将结果转换为百分数
                     // 将结果赋值给进度条的宽度属性 
                     bar.style.width = (ev.loaded / ev.total) * 100 + '%';
                 }
             }
  • FormData 文件上传图片即时预览

在我们将图片上传到服务器端以后,服务器端通常都会将图片地址做为响应数据传递到客户端,客户端可以从响应数据中获取图片地址,然后将图片再显示在页面中。

				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);
                     }
                 }
  • 演示代码
    服务器端代码
// 实现文件上传的路由
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]
		});
	});
});

客户端代码

<body>
	<div class="container">
		<div class="form-group">
			<label>请选择文件</label>
			<input type="file" id="file">
			<div class="padding" id="box">
				<!-- <img src="" alt="" class="img-rounded img-responsive"> -->
			</div>
			<div class="progress">
				<div class="progress-bar" style="width: 0%;" id="bar">0%</div>
			</div>
		</div>
	</div>
	<script>
		var file = document.getElementById('file');
		var bar = document.getElementById('bar');
		var box = document.getElementById('box');
		file.onchange = function(){
			var formData = new FormData();
			//将用户选择的文件追叫到formData表单对象中
			formData.append('attrName',this.files[0]);	

			var xhr = new XMLHttpRequest();
			xhr.open('post','http://localhost:3000/upload');
			//文件上传过程中持续触发
			xhr.upload.onprogress = function (ev) {
				//ev.loaded 文件上传了多少
				//ev.total 上传文件总大小
				var result = (ev.loaded / ev.total) * 100 + '%';
				bar.style.width = result;
				//将百分比显示子进度条中
				bar.innerHTML = result;
			  }
			xhr.send(formData);
			xhr.onload = function () {
				if(xhr.status == 200){	
					var result = JSON.parse(xhr.responseText);
					//动态创建img标签
					var img  = document.createElement('img');
					img.src = result.path;
					img.onload = function () {
						//图片加载完成后将图片显示在浏览器中
						box.appendChild(img);
					  }		
				}
			  }
		}
	</script>
</body>
  • 浏览器显示页面
    在这里插入图片描述

最后说一句:祝所有程序员1024快乐!!!

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页