1. 程式人生 > >FormData 物件的使用

FormData 物件的使用

FormData物件用以將資料編譯成鍵值對,以便用XMLHttpRequest來發送資料。可以使用ajax請求傳送multipart/form-data資料。

使用方法

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //數字123456會被立即轉換成字串 "123456"

// HTML 檔案型別input,由使用者選擇
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 物件
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新檔案的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

物件轉formdata

// 物件轉formdata
function objToFormData (config) { // 物件轉formdata格式
  let formData = new FormData()
  let obj = config.data
  let arrayKey = config.arrayKey
  for (var i in obj) {
    if (this._.isArray(obj[i])) {
      obj[i].map(item => {
        if (!arrayKey) {
          formData.append(i, item)
        } else {
          formData.append(i + '[]', item)
        }
      })
    } else {
      formData.append(i, obj[i])
    }
  }
  return formData
}

注意

傳送時記得修改傳送資料型別

headers: {
           'Content-Type': 'multipart/form-data'
            }