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

想得到一個FormData對象：

var?formdata =?new?FormData();

方案1：創建一個空的FormData對象，然后再用append方法逐個添加鍵值對：

var?formdata =?new?FormData();

formdata.append("name",?"呵呵");

formdata.append("url",?"http://www.baidu.com/");

方案2：取得form元素對象，將它作為參數傳入FormData對象中！

var?formobj =? document.getElementById("form");

var?formdata =?new?FormData(formobj);

方案3：利用form元素對象的getFormData方法生成它！

var?formobj =? document.getElementById("form");

var?formdata = formobj.getFormData()

Method

FormData.append

本方法用于向已存在的鍵添加新的值，如該鍵不存在，新建之。

語法

formData.append(name, value);

formData.append(name, value, filename);

注:通過FormData.append()方法賦給字段的值若是數字會被自動轉換為字符(字段的值可以是一個Blob對象,一個File對象,或者一個字符串,剩下其他類型的值都會被自動轉換成字符串).

參數解釋

name

鍵 (key)， 對應表單域

value

表單域的值

filename (optional)

The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".

FormData.delete

將一對鍵和值從FormData對象中刪除。

formData.delete(username);

FormData.get

返回給定鍵的第一個值

formData.append('username','Justin');formData.append('username','Chris');formData.get(username);// "Justin"

FormData.getAll

返回給定鍵的所有值

formData.append('username','Justin');formData.append('username','Chris');formData.getAll(username);// ["Justin", "Chris"]

FormData.has

檢查是否包含給定鍵，返回true或false

formData.has(username);

FormData.set

設置給定鍵的值

formData.set(name, value);

formData.set(name, value, filename);

Ajax通過FormData上傳文件

1.使用表單初始化FormData對象方式上傳文件

HTML代碼

upload

javascript代碼

$.ajax({? ? url:'/upload',? ? type:'POST',? ? cache:false,? ? data:newFormData($('#uploadForm')[0]),? ? processData:false,? ? contentType:false}).done(function(res){}).fail(function(res){});

這里要注意幾點：

processData設置為false。因為data值是FormData對象，不需要對數據做處理。

標簽添加enctype="multipart/form-data"屬性。

cache設置為false，上傳文件不需要緩存。

contentType設置為false，不設置contentType值，因為是由表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。

上傳后，服務器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為中聲明的是name="file"。

如果不是用表單構造FormData對象又該怎么做呢？
2.使用FormData對象添加字段方式上傳文件

HTML代碼

upload

這里沒有標簽，也沒有enctype="multipart/form-data"屬性。

javascript代碼

varformData =newFormData();formData.append('file', $('#file')[0].files[0]);$.ajax({? ? url:'/upload',? ? type:'POST',? ? cache:false,? ? data: formData,? ? processData:false,? ? contentType:false}).done(function(res){}).fail(function(res){});

這里有幾處不一樣：

append()的第二個參數應是文件對象，即$('#file')[0].files[0]。

contentType也要設置為‘false’。

從代碼$('#file')[0].files[0]中可以看到一個標簽能夠上傳多個文件，

只需要在里添加multiple或multiple="multiple"屬性。

3.服務器端讀文件

從Servlet 3.0開始，可以通過request.getPart()或request.getPars()兩個接口獲取上傳的文件。