JS之AJAX篇-FormData對(duì)象
2021-09-29 14:44:39

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

new FormData (form? : HTMLFormElement)

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

append()

append()方法用于給當(dāng)前FormData對(duì)象添加一個(gè)鍵/值對(duì)

append(name, value[, filename])

name表示字段名，value表示字段值。filename是一個(gè)可選的參數(shù)，當(dāng)value參數(shù)被指定為一個(gè)Blob對(duì)象或者一個(gè)File對(duì)象時(shí)，filename會(huì)被發(fā)送到服務(wù)器，它用于指定文件的文件名。對(duì)于Blob對(duì)象來(lái)說(shuō)，filename默認(rèn)為"blob"

創(chuàng)建FormData對(duì)象

<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對(duì)象

自定義FormData對(duì)象和使用表單創(chuàng)建FormData對(duì)象的效果是一樣的

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類(lèi)型只能用于post方式