JS之AJAX篇-FormData对象
2021-09-29 14:44:39

开发中，经常会遇到文件上传、表单提交的情况，当HTML表单同时包含文件上传元素和其他元素时，Content-Type的MIME类型必须是“multipart/form-data”，并且用POST方法提交表单。XMLHttpRequest 2级定义了FormData类型，为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利

new FormData (form? : HTMLFormElement)

可选参数form表示一个HTML表单元素，可以包含任何形式的表单控件，包括文件输入框

append()

append()方法用于给当前FormData对象添加一个键/值对

append(name, value[, filename])

name表示字段名，value表示字段值。filename是一个可选的参数，当value参数被指定为一个Blob对象或者一个File对象时，filename会被发送到服务器，它用于指定文件的文件名。对于Blob对象来说，filename默认为"blob"

创建FormData对象

<form name="test">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="radio" name="sex" value="男">男
  <input type="radio" name="sex" value="女">女
</form>
<div id="result"></div>
<button id="btn">btn</button>
<script>
  var f = document.forms.test;
  btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4) {
        if(xhr.status == 200) {
          result.innerHTML = xhr.responseText
        }
      }
    }
    xhr.open('POST', '/api/test', true);
    xhr.send(new FormData(f));
  }
</script>

自定义FormData对象

自定义FormData对象和使用表单创建FormData对象的效果是一样的

btn.onclick = function() {
  var f = new FormData();
  f.append('username', 'qqq')
  f.append('password', 'qqq')
  f.append('sex', '男')
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
      if(xhr.status == 200) {
        result.innerHTML = xhr.responseText
      }
    }
  }
  xhr.open('POST', '/api/test', true);
  xhr.send(f)
}

注意： multipart/form-data类型只能用于post方式