FormData對象

FormData對象是HTML5中新增的一個對象。它能使如今的AJAX交互更加簡單。以前的AJAX在上傳前，須要將表單的數據序列化，即jQuery中serialize；包括異步上傳文件也須要寫一大坨「看起來沒那麼必要 」的東西。FormData可以簡化這些步驟，使AJAX的數據發送變得簡單清晰許多 。

FormData有三種用法，一種是建立全新的FormData對象：

var formData = new FormData();

一種是獲取form表單的FormData對象：

var  form = document.getElementById( "form1" );

var  formData =  new  FormData(form );

或者經過form的getFormData方法：

var  form = document.getElementById( "form1" );

var  formData = form.getFormData();

獲取FormData對象後，還須要向其內部插入數據，目前只能使用append：

//參數：(name,value);

formData.append( "pwd" , "123456" );

當將本地數據添加完畢後，能夠經過ajax的send方法傳送到服務器。

var  xhr =  new  XMLHttpRequest();

xhr.open( 'GET' , "http://localhost/" , true );

xhr.send(formData);

固然FormData並不兼容，這是司徒正美提供的一個兼容的 FormData代碼：https://gist.github.com/lemonhall/3120320

FormData在異步上傳文件上會更加省事：

var  files = fileInput.files;

var  formData =  new  FormData();

//將全部文件插入formData

for  ( var  i=0; i<files.length; i++) {

     formData.append(fileInput.name, files[i]);

}

              

var  xhr =  new  XMLHttpRequest();

xhr.open( 'POST' , "http://localhost/ajaxload/test.php" , true );

//便可上傳

xhr.send(formData);

很是簡單卻很是實用的一個對象。