FormData 对象

在这里要简要的介绍一下FormData 对象，FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
FormData对象用以将数据编译成键值对，以便用 XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()用来提交表单，这个方法和提交表单按钮很类似。（是html5新增的成员，专门配合ajax操作，用于客户端与服务端之间传递二进制的数据）

创建一个空对象

可以使用它的构造函数，也可以用原有的表单去初始化一个对象，下面的例子，就是用原有的表单去初始化一个实例
var formData = new FormData();

FormData对象的提交

FormData对象提交会将表单的数据连同后期你自己新增的数据以键值对的形式打包发出去，后期新增数据用append(key, value)，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

一些简要的使用

  // 获取页面已有的一个form表单
    var form = document.getElementById("myForm");
    // 用表单来初始化
    var formData = new FormData(form);
    // 我们可以根据name来访问表单中的字段
    var name = formData.get("name"); // 获取名字
    var psw = formData.get("psw"); // 获取密码
    // 当然也可以在此基础上，添加其他数据
    formData.append("token","kshdfiwi3rh");

关于formData对象，更详细的可以参考：
https://www.cnblogs.com/gczmn/p/9437935.html
或者mdn：
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

基于javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件异步上传</title>
</head>
<body>
  <form action="" enctype="multipart/form-data" method="post" name="fileinfo">
    <input type="text" name="username" placeholder="input your name"><br>
    <input type="email" name="email" placeholder="input your email"><br>
    
    <input type="file" name="file"><br>
    <input type="submit" value="上传">
  </form>
  <p></p>
  <script>

    var form = document.forms.namedItem("fileinfo");
    form.addEventListener('submit',function (ev) {
      var pObj = document.querySelector('p')
      data = new FormData(form)
      data.append('text', 'some data')

      var xhr = new XMLHttpRequest()
      xhr.open('POST','time.php',true)
      

      xhr.onreadystatechange=function () {
        if (this.readyState!==4) return;
        pObj.innerHTML='上传成功！'
        console.log(this.responseText)
      }
      xhr.send(data)//借助于form data的传递文件
      //阻止浏览器默认行为，否则会触发提交事件
      ev.preventDefault();
    })
  </script>
</body>
</html>