欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Ajax学习--FormData对象

程序员文章站 2022-03-02 08:29:23
1.FormData 对象的作用模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式异步上传二进制文件2.FormData 对象的使用1.准备 html 表单

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>

提交表单后打印结果
Ajax学习--FormData对象

3.FormData 对象的实例方法

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

Ajax学习--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>
  • 浏览器显示页面
    Ajax学习--FormData对象

最后说一句：祝所有程序员1024快乐！！！

本文地址：https://blog.csdn.net/dairen_j/article/details/109260523

相关标签： Ajax学习 js学习笔记 1024程序员节 ajax js

上一篇： Ajax 解决网络延迟用户疯狂点击问题

下一篇： Openlayers测量距离与面积的实现方法

推荐阅读