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

開發(fā)中，經(jīng)常會遇到文件上傳、表單提交的情況，當HTML表單同時包含文件上傳元素和其他元素時，Content-Type的MIME類型必須是“multipart/form-data”，并且用POST方法提交表單。XMLHttpRequest 2級定義了FormData類型，為序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)(用于通過XHR傳輸)提供了便利

new FormData (form? : HTMLFormElement)

可選參數(shù)form表示一個HTML表單元素，可以包含任何形式的表單控件，包括文件輸入框

append()

append()方法用于給當前FormData對象添加一個鍵/值對

append(name, value[, filename])

name表示字段名，value表示字段值。filename是一個可選的參數(shù)，當value參數(shù)被指定為一個Blob對象或者一個File對象時，filename會被發(fā)送到服務器，它用于指定文件的文件名。對于Blob對象來說，filename默認為"blob"

創(chuàng)建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對象和使用表單創(chuàng)建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方式