FormData对象
一、什么是FormData对象
异步上传二进制文件
将表单映射成表单对象
将表单和ajax结合起来,不使用表单自带的请求方式,使用ajax发送表单的数据
二、语法
<form id='form'>
<input type='text' name="username">
</form>
<script type='text/javascript'>
//获取表单元素
var form = document.getElementById('#form')
//将表单元素映射成表达对象
var formdata = new FormData(form)
//xml.sen(formdata )直接发送表单对象即可。
</script>
三、express处理formdata对象
使用formidable模块
npm install formidable
const formidable = require('formidable')
//创建表单对象
const form = new formidable.IncomingForm()
app.on('/form',(req,res)=>{
form.parse(req,(err,fields,files)=>{
res.send(fields)
})
})
//fields是表单对象
//files是文件对象
四、FormData对象实例的方法
在客户端处理表单数据
1.获取表单对象中属性的值,get方法
formData.get('username')
2.设置表单对象中属性的值,set方法
formData.set('username','飞')
//formData.set(key,valu)
可以新增或者修改表单对象的属性
3.删除表单对象中的属性值,delete方法
formData.delete('username')
4.向表达对象中追加属性,append方法
var formData = new FormData()
formData.append('username','飞')
//formData.append(key,valu)
可以创建一个空的表单对象,向里面追加值。
set方法也可以做到,但是在属性名称已经有的情况下,set方法会覆盖同名的属性,而append会往后新增一个,而不是修改原有的属性,即一个表单对象有两种同名的属性。但是服务器端不做设置时,同名的属性只会获取最后一个。
5.二进制文件上传
图片,视频和音频文件上传
<input type='file' id="file">
//文件上传控件
//获取文件上传控件元素
var file = document.getElementById('#file')
//文件上传状态发送改变时触发的事件
file.onchange = function(){
var formdata = new FormData()
//将用户上传的文件追加到表单对象中
formdata .append('attrName',this.file[0])
//然后通过ajax发送请求
var xml = new XMLHttpRequest()
xml.open('post','http://localhost:3000/upload')
xml.send(formdata)
xml.onload = function(){
if(xml.status ==200){
//操作xml.responseText
}
}
}
express处理二进制文件
app.post('./upload',(req,res)=>{
//使用formidable模块创建表单处理对象
const form = new formidable.IncomingForm()
//创建文件存储绝对路径,使用path模块拼接
form.uploaDir = path.join(__dirname,'public','uploadFiles')
//keepExtensions 是否保留上传文件的后缀名,true是保留,false是不保留
form.keepExtensions = true
form.parse(req,(err,fields,files)=>{
res.send(files)
})
})
6.上传进度提示
//文件上传时触发
file.onchange = function(){
//文件上传过程中持续触发onprogress 事件,不止一次,ev是当前文件,loaded是已上传的大小,total是总的大小
//upload是文件上传相关属性,这个事件需要放在send之前,上传并不是发送
xml.upload.onprogress = function(ev){
bar.syle.width = (ev.loaded/ev.taotal)*100+'%'
var formdata = new FormData()
//将用户上传的文件追加到表单对象中
}
formdata .append('attrName',this.file[0])
//然后通过ajax发送请求
var xml = new XMLHttpRequest()
xml.open('post','http://localhost:3000/upload')
xml.send(formdata)
xml.onload = function(){
if(xml.status ==200){
//操作xml.responseText
}
}
7.图片及时预览
将图片上传到服务器,服务器返回图片的地址,客户端读取这个地址,显示这个图片,盘符这个地址不要,只要项目文件开始的地址拼接到url后面就能访问了。
express框架返回
app.post('./upload',(req,res)=>{
//使用formidable模块创建表单处理对象
const form = new formidable.IncomingForm()
//创建文件存储绝对路径,使用path模块拼接
form.uploaDir = path.join(__dirname,'public','uploadFiles')
//keepExtensions 是否保留上传文件的后缀名,true是保留,false是不保留
form.keepExtensions = true
form.parse(req,(err,fields,files)=>{
res.send({
path:files.attrName.path.split('public')[1]//主要public里静态文件,拼接到url后
})
})
})
前端
//ajax获取结果后,需要将json字符串转为json对象
var result = JSON.parse(xhr,responseText)
//动态创建一个img标签,这样可以让用户看不到图片加载的过程,不然直接赋值到已有的src属性上,会有加载过程
var img = document.creatElement('img')
img.src = result.path
//img.onload是等图片下载完后,执行某种操作。可以避免图片未下载完就添加到页面上了。
img.onload = function(){
box.appendChild(img)
}