FormData

簡介

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件。

使用

通過FormData對象可以組裝一組用 XMLHttpRequest發送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit() 方法傳輸的數據格式相同。

構造函數

var formData = new FormData(FormElement);

這里的FormElement是html元素為form表單；當然這里也可以直接構造不用填寫form元素，填寫form元素的目的是可以直接選取form中表單元素的name和value為formData添加鍵值對。

添加

append(): 給當前formData對象添加一個鍵/值對。

append(DOMString name, Blob value, optional DOMString filename);

append(DOMString name, DOMString value);

name: 字段名稱，也就是鍵名；

value: 字段值，可以是Blob對象，可以是File對象，可以是字符串，剩下其它，該值會被自動轉為字符串；

filename: (可選)指定文件的文件名，當value參數被指定為一個Blob對象或者一個File對象時，該文件名會被發送到服務器上，對于Blob對象來說，這個值默認為”blob”。

發送

把已經添加好鍵值對的formData對象直接作為ajax請求時所傳的參數。如果你請求成功，會看到formData會把form里的所有表單name和value生成如圖所示：

示例代碼

html

Your email address:

Custom file label:

File to stash:

js - 運用了jquery之類的插件

(function(){

var file =null, fileOther=null,fd=new FormData($("#form")[0]);

bindEvent();

function bindEvent(){

$("#file").change(function(){

file = this.files[0];

});

$("#fileother").change(function(){

fileOther = this.files[0];

})

$("#submit").click(function(){

fd.append("file", file);

fd.append("fileother", fileOther);

ajaxSend();

})

}

function ajaxSend(){

$.ajax({

url: "your url",

type: "post",

data: fd,

processData: false, // 不處理數據

contentType: false, // 不設置內容類型

success: function(resp){

console.log(resp);

}

})

}

})()

以上的案例有一個坑，因為本人踩過，所以就留給你們踩踩吧。

其它資源

總結

以上是生活随笔為你收集整理的html5 formdata api,HTML5 API FormData --- 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。