formData的使用

formData的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

1.通过HTML表单创建FormData对象

可以将form的表单数据添加到FormData对象里，作为请求参数

<form action="" id="form">
    <input type="text" name="username"> // tom
    <input type="text" name="password"> // 123456
    <input type="button" value="提交" id="submit">
  </form>
  // 下面是点击button按钮发送请求，携带表单数据
  const form = document.getElementById('form')  // 获取表单元素
  this.submit.onclick = () => {
  // 构造一个包含Form表单数据的FormData对象，需要在创建FormData对象时指定表单的元素
     const formData = new FormData(form)
     // 发送请求，不用配置Content-Type，formData会自动添加
     this.request('POST', 'submitform.php', formData) // 这是一个封装的ajax请求， xhr.send(formData)
   }

结果

2.使用FormData对象上传文件

近期做了一个上传图片的，就使用了FormData对象
需要一个input的file类型，进行文件上传

<input type="file" id='inputNode'>
const inputNode = document.getElementById('inputNode')
// 事件
inputNode.onchange= function () {
	const file = e.target.files[0]  // 获取选择的file文件
      let form = new FormData() // 创建FormData对象
      form.append('Filedata', file)  // FormData 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键
      // 然后就是发请求上传选中的图片
      this.request('POST','https://test.dreamreader.qq.com/netc/upload',form) // 这是封装ajax请求，不用配置content-type，FormData会自动配置。 其中ajax中 xhr.send(form)
}