1. FormData的作用

1.1 将Form表单元素,转换成表单对象

在使用Ajax进行表单提交的时候,采用原生的js获取dom,然后添加属性.当表单项很多的时候,代码会很多.不利于后期阅读、维护.
这时,可以使用FormData对象,将HTML中的表单元素转换成表单对象,如下:

<!-- 表单对象 -->
<form id="form"><input type="text" name="username" /><input type="text" name="password" /><input type="button" />
</form>

将HTML中的DOM元素转换成表单对象,

var form = document.getElementById('form');
var formData = new FormData(form);// 使用ajax传递表单对象
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:3000/formData')
xhr.send(formData);

此时,服务器端需要使用 formidable 进行接收
npm i formidable

const express = require('express')
const fomidable = require('formidable');
const app = express();
app.post('/formData',(req, res)=>{// 创建 formidable 实例const form = new formidable.IncomingForm();form.parse(req, (err, fields, files) =>{// 传递的参数都在 fields 中  res.send(fields)})
})

1.2 FormData实现二进制文件上传

下面的样式用到了bootstrap,不导入也没影响…
思路如下:

获取input表单元素,并监听它的改变事件(file.onchange)
当input改变时,创建一个FormData实例(new FormData())
将上传的文件添加到实例中(formData.append())
将文件上传到服务器(xhr.send)
服务器端接收到上传的文件,将其保存在/public/uploads中
服务器返回ok

1.2.1 文件上传的表单控件

<div class="container"><div class="form-group"><label>请选择文件</label><input type="file" id="file" />
</div>

1.2.2 [客户端]文件上传

<script type="text/javascript">var file = document.getElementById('file');// 监听文件上传file.onchange = function(){var formData = new FormData();// 将文件的二进制信息(files)放在formData载体中,并取名classNameformData.append('className', this.files[0]);var xhr = new XMLHttpRequest();xhr.open('post', 'http://localhost:3000/uploads');xhr.send(formData);xhr.onload = function () {// 上传成功,收到服务器端的响应if(xhr.status == 200){console.log(xhr.responseText);}}}
</script>

1.2.3 [服务端]文件上传

服务端监听路由upload
使用formidable,来获取传递的表单参数
设置保存的路径form.uploadDir
返回信息

const express = require('express');
const formidable = require('formidable');
const path = require('path');
const app = express();
app.post('/upload', (req, res)=>{const form = new formidable.IncomingForm();// 配置表单的属性form.uploadDir = path.join(__dirname, 'public', ''); // 文件存储在服务端的路径form.keepExtensions = true; // 文件保留后缀名// 表单接收 客户端的 FormData 参数form.parse(req,(err, fields, files)=>{res.send('ok')})
})

2. 参考

源代码

javascript --- [FormData的使用] 表单元素转换成表单对象二进制文件上传相关推荐

HTML5+jSignature插件手写签名生成图片并转换成文件流实现服务器上传功能
简介项目结构:html+vue+springboot html引入VUE项目vue.min.js.jQuery的jquery-3.4.1.min.js,签名:modernizr.js.jSignat ...
微信小程序云开发把时间戳转换成正常的时间格式上传到数据库中
一.utils文件里面建一个utils.js文件(内容如下) 目录一.utils文件里面建一个utils.js文件(内容如下) 二．在上传用户详情信息的界面最上方标注三,在上传的函数中四.结果 ...
HTML基本语法之表单标签：表单的组成，表单域，表单控件元素（表单元素），input表单元素， label标签，表单控件（表单元素）， select表单元素， textarea表单元素
文章目录表单标签表单的组成表单域常用属性: 表单控件元素(表单元素) input表单元素 label标签表单控件(表单元素) select表单元素 textarea表单元素表单元素几个总结 ...
24.shell中list详解,定义list,获取List的总个数,获取list的某个元素值,将list的每个元素转换成以空格分隔的字符串,空格分隔的字符串转换成list,for循环list
文章目录前言定义list 获取List的总个数获取list的某个元素值将list的每个元素转换成以空格分隔的字符串空格分隔的字符串转换成list for循环list 总结友情链接前言 s ...
linux 串口字符间隔,嵌入式linux编程过成中模块从串口读数需要特定的字符段并且需要每两位字符数组元素转换成一个16进制数（提取特定字符串+字符串转16进制）...
嵌入式linux编程过成中用到zigbee模块 zigbee从串口读数需要特定的字符段并且需要每两位字符数组元素转换成一个16进制数 (提取特定字符串+字符串转16进制) #include #incl ...
嵌入式linux编程过成中模块从串口读数需要特定的字符段并且需要每两位字符数组元素转换成一个16进制数（提取特定字符串+字符串转16进制）
嵌入式linux编程过成中用到zigbee模块 zigbee从串口读数需要特定的字符段并且需要每两位字符数组元素转换成一个16进制数 (提取特定字符串+字符串转16进制) #include<st ...
gson java 对象_Gson把json串转换成java实体对象
Gson把json串转换成java实体对象的方法如下: 1.首先导入Gson的jar包,网上可以下载. java实体对象如下: public class Model { private double ...
html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签其type类型主要有有以下几种:type="tel"用 ...
HTML给表单元素赋值,JQuery表单元素取值赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 jQuery 表单元素取值与赋值方法总结 function get(){ var test1 = $("input.test1").va ...

javascript --- [FormData的使用] 表单元素转换成表单对象二进制文件上传

1. FormData的作用

1.1 将Form表单元素,转换成表单对象

1.2 FormData实现二进制文件上传

1.2.1 文件上传的表单控件

1.2.2 [客户端]文件上传

1.2.3 [服务端]文件上传

2. 参考

javascript --- [FormData的使用] 表单元素转换成表单对象二进制文件上传相关推荐

最新文章

热门文章

javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传

1. FormData的作用

1.1 将Form表单元素,转换成表单对象

1.2 FormData实现二进制文件上传

1.2.1 文件上传的表单控件

1.2.2 [客户端]文件上传

1.2.3 [服务端]文件上传

2. 参考

javascript --- [FormData的使用] 表单元素转换成表单 对象二进制文件上传相关推荐

最新文章

热门文章

javascript --- [FormData的使用] 表单元素转换成表单对象二进制文件上传

javascript --- [FormData的使用] 表单元素转换成表单对象二进制文件上传相关推荐