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)
}