form表单默认post请求的 enctype 为 application/x-www-form-urlencoded

<form 
	method="POST"
  action="server/upload.php"
  enctype="application/x-www-form-urlencoded">
  <input type="file" name="file" />
</form>

如果传文件，默认只是把文件名提交了，并不会提交文件：

Untitled

form 传文件

传文件一般用二进制
enctype=multipart/form-data 把上传的文件转成二进制

同步上传

单文件

<form 
	method="POST"
  action="server/upload.php"
  enctype="multipart/form-data">
  <input type="file" name="file" />
  <input type="submit" value="上传" />
</form>

多文件

<input type="file" name="file[]" multiple />

或者

<input type="file" name="file[]" />
<input type="file" name="file[]" />
<input type="file" name="file[]" />
<input type="file" name="file[]" />

FormData 构造函数

Untitled

new 出来的 FormData ，append 数据后直接打印，只是个实例对象，除了 proto 外什么都没有
获取与设置：
- fd.get(键名) 没有的值，返回 null，而不是 undefined
- fd.set("Username", "李四")
- fd.delete("Username")
- fd.has("Username") 有没有这个字段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="username" value="张三" />
  <input type="text" id="password" value="123" />
  <input type="submit" id="submitBtn" value="提交" />

  <script>
    var oUsername = document.getElementById("username"),
        oPassword = document.getElementById("password"),
        oSubmitBtn = document.getElementById("submitBtn"),
        fd = new FormData();

    oSubmitBtn.onclick = function() {
      fd.append("Username", oUsername.value);
      fd.append("Password", oPassword.value);

      console.log(fd);
      
      fd.set("Username", "李四");
      
      console.log("username: ", fd.get("Username"));
      console.log("password: ", fd.get("Password"));
    }
  </script>
</body>
</html>

form 传文件

同步上传

单文件

多文件

FormData 构造函数

多文件上传