网站建设柒首先金手指9,自己电脑wordpress,建设网站的公司哪家好,线下推广方式有哪些1. FormData的作用
1.1 将Form表单元素,转换成表单对象
在使用Ajax进行表单提交的时候,采用原生的js获取dom,然后添加属性.当表单项很多的时候,代码会很多.不利于后期阅读、维护. 这时,可以使用FormData对象,将HTML中的表单元素转换成表单对象,如下:
!-- 表单对象 --!-- 表单对象 --
form idforminput typetext nameusername /input typetext namepassword /input typebutton /
/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 classcontainerdiv classform-grouplabel请选择文件/labelinput typefile idfile /
/div1.2.2 [客户端]文件上传
script typetext/javascriptvar 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);}}}
/script1.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. 参考
源代码
