formData使用總結

看風景就發表於2017-08-19
ORM

1.formData基本使用

//可以從form元素初始化一個FormData物件，或者new一個空物件
var formData = new FormData([fromElement]);

//可以新增一個新的鍵值對，從form初始化或空物件均可
formData.append(key,value);

//formData上傳檔案，form要設定enctype為multipart/form-data

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

2.xhr使用formData

var newFormData = new FormData(someFormElement);
var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));

還可以在已有表單資料的基礎上，繼續新增新的鍵值對，如下：

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);

3.jquery使用formData

$.ajax({
    url: 'upload01.php',
    method: 'POST',
    data: formData,
    contentType: false,//必須
    processData: false,//必須
    cache: false //上傳檔案不需要快取
})

引數說明：
contentType
jquery ajax的預設值為'application/x-www-form-urlencoded; charset=UTF-8'，
如果有input type=“file”，則contentType應該為‘multipart/form-data’,設定為false，不讓
jquery設定contentType

processData
jQuery會處理髮送的資料，將資料按照'application/x-www-form-urlencoded'的
要求轉換為查詢字串，如果要傳送的資料是DOMDocument或者不需要處理，就可以設定為false不讓jQuery
轉換資料，我們這裡要傳送的資料其實就是DOMDocument

dataType
不要設定為json，讓jquery根據http響應頭的contentType去判斷，返回一個合適的資料型別

4.vue-resource使用formData

var formData = new FormData();
formData.append('foo', 'bar');

this.$http.post('/api', formData)

5.axios使用formData

6.superAgent使用formData

相關文章