FormData对象
作用：
1 模拟HTML表单，相当于HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
2 异步上传二进制文件
注意：客户端接收普通post表单用的body-parser，但是它不能接收FormData传递的参数。要用formidable
代码：
<body>
<form id='form'>
<input type="text" name="userName">
<input type="text" name="password">
<input type="button" id="btn" value="submit">
</form>
<script>
var btn = document.getElementById('btn')
btn.onclick = ()=>{
var form = document.getElementById('form')
var formdata = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('post','http://localhost:3000/formData')
xhr.send(formdata)
xhr.onload = ()=>{
if(xhr.status == 200){
console.log(xhr.responseText);
}
}
}
</script>
</body>
//服务器端：
var formidable = require('formidable')
app.post('/formData',function(req,res){
let form = new formidable.IncomingForm()
form.parse(req,(err,fields,files)=>{
//fields保存的是普通的表单内容，files是文件上传的相关信息
res.send(fields)
})
})
FormData下的实例方法
/*
get(‘key’):获取表单对象属性的值
*/
//获取name为userName的value值
var names = formdata.get('userName')
console.log(names);
/*
set('key','value'):设置表单中属性的值
*/
//如果set的这个表单属性存在，则是替换原有值，如果不存在，则会创建这个属性
formdata.set('password','wahahaha')
/*
delete() 删除表单中的属性值
*/
/*
append() 向表单属性中追加值
使用场景：在创建formData对象时，我们可以不传递表单元素
而是使用追加属性的方式完成post请求
set和append的区别：
在属性名称已经存在的情况下，set会覆盖之前的属性，而append会保留两个属性及其值
*/
FormData二进制文件上传
上传文件示例代码
服务器端：
app.post('/upload',(req,res)=>{
let form = new formidable.IncomingForm()
//设置客户端上传过来的文件的存储路径
form.uploadDir = path.join(__dirname,'public','uploads')
//保存文件后缀
form.keepExtensions = true
form.parse(req,(err,fields,files)=>{
//fields保存的是普通的表单内容，files是文件上传的相关信息
res.send('ok')
})
})
客户端
<div id="uploadDiv">
<input type="file" id="upload">
</div>
<script>
var file = document.getElementById('upload')
file.onchange = function(){
var formData = new FormData()
formData.append('attrName',this.files[0])
var xhr = new XMLHttpRequest()
xhr.open('post','http://localhost:3000/upload')
xhr.send(formData)
xhr.onload = function(){
if(xhr.status == 200){
console.log(xhr.responseText);
}else{
}
}
}
</script>
</body>
上传进度展示
<div id="bar">
<div id="programBar" ></div>
</div>
思路：
实时获取上传进度，改变内部那个div的width即可
xhr.upload.onprogress = function(ev){
var program = ((ev.loaded/ev.total)*100).toFixed(2) + '%'
bar.style.width = program
bar.innerHTML = program
}
图片上传即时预览
思路，让服务器端将图片地址作为响应数据传递的客户端，然后让客户端去显示图片
客户端
xhr.onload = function(){
if(xhr.status == 200){
var pathJson = JSON.parse(xhr.responseText)
var img = document.createElement('img')
img.src = pathJson.path
img.onload = function(){
var box = document.getElementById('img')
box.appendChild(img)
}
}else{
}
}
服务器端
form.parse(req,(err,fields,files)=>{
//fields保存的是普通的表单内容，files是文件上传的相关信息
res.send(
{
path:files.attrName.path.split('public')[1]
}
)//上传过来的文件的存储路径
})
网友评论