FormData对象

以你之姓@ 2021-09-07 06:12 422阅读 0赞

### FormData对象 ###

*  一、什么是FormData对象
 *  二、语法
 *  三、express处理formdata对象
 *  四、FormData对象实例的方法
 *   *  1.获取表单对象中属性的值,get方法
     *  2.设置表单对象中属性的值，set方法
     *  3.删除表单对象中的属性值，delete方法
     *  4.向表达对象中追加属性，append方法
     *  5.二进制文件上传
     *  6.上传进度提示
     *  7.图片及时预览

# 一、什么是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框架返回

前端

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