FormData

語法

• var formData = new FormData(form)

form--可選， 一個 HTML 上的 <form> 表單元素一一當指定了，這種方式建立的 FormData 對象會自動將 form 中的表單值也包含進去， 包括文件內容也會被編碼以後包含進去

例子

第一種方式

• var formData = new FormData() //當前爲空
• formData.append('username', 'BetiaStar') // 使用 FormData.append 來添加鍵/值對到表單裏面

第二種方式

• <form id="myForm" name="myForm">
•   <div>
•     <label for="username">輸入用戶名</label>
•     <input type="text" id="username" name="username">
•   </div>
•   <div>
•     < for="useracc">輸入帳號:</label>
•     < type="text" id="useracc" name="useracc">
•   </div>
•   <div>
•     <label for="userfile">上傳文件:</label>
•     <input type="file" id="userfile" name="userfile">
•   </div>
• <input type="submit" value="Submit!">
• </form>

注意：全部的輸入元素都須要有name屬性，不然沒法訪問到值。

• var myForm = document.getElementById('myForm')
• formData = new FormData(myForm)

方法

append()

• 這個方法有兩個版本： 一個有兩個參數的版本和一個有三個參數的版本
• formData.append(name, value)
• formData.append(name, value, filename)
• name
•   - value中包含的數據對應的表單名稱
• value
•   - 表單的值。能夠是 USVString 或者 Blob (包括子類型，如 File)
• filename--可選
•   - 傳給服務器的文件名稱 (一個 USVString ), 當一個 Blob 或者 File 被做爲第二個參數的時候， Blob 對象的默認文件名是 "blob"。File 對象的默認文件名是該文件的名稱

注意： 若是你指定一個 Blob 做爲數據添加到 FormData 對象中，文件名會被放在 "Content-Disposition" 頭部(經常會根據瀏覽器變化而變化)傳給服務器

示例

• // 下面的代碼建立了一個空的 FormData 對象
• var formData = new FormData()
• // 你能夠經過 FormData.append wangle對象里加入鍵值對
• formData.append('username', 'BetiaStar')
• formData.append('userpic', userfile.files[0], 'betiastar')
• // 跟常規表單數據同樣，你能夠使用同一個名稱添加多個值。例如(爲了與 PHP 命名習慣一致在名稱中添加了 [])
• formData.append('hobby[]', sing, '唱歌')
• formData.append('hobby[]', dance, '跳舞')
• formData.append('hobby[]', run, '跑步')
• // 這項技術使得多文件上傳的處理更加簡單，由於所得數據結構更有利於循環

delete()

• formData.delete(name)
• name
•   - 要刪除的 Key 的名字
• formDat.delete('username')

entries()

• formData.entries()
• var formData = new FormData()
• formData.append('key1', 'value1')
• formData.append('key2', 'value2')
• for(var iter of formData.entries()) {
•   console.log(iter[0] + ', ' + iter[1])
• }

get()

• formData.get(name)
• name
•   - 將要獲取值的鍵名
• formData.append('username', 'betiastar')
• formData.get('username')

getAll()

• formData.getAll(name)
• name
•   - 將要獲取值的鍵名
• formData.append('hobby', 'sing')
• formData.append('hobby', 'run')
• formData.getAll('hobby')

has()

• formData.has(name)
• name
•   - 將要查詢的鍵名
• formData.append('hobby', 'sing')
• formData.has('hobby')

keys()

• formData.keys()
• var formData = new FormData()
• formData.append('key1', 'value1')
• formData.append('key2', 'value2')
• for(var iter of formData.keys()) {
•   console.log(iter[0] + ', ' + iter[1])
• }

set()

• 該方法有兩種使用方式，一個是傳入兩個參數，一個是傳入三個參數
• formData.set(name, value)
• formData.set(name, value, filename)
• name
•   - 字段名稱
• value
•   - 字段的值，若是是傳入兩個參數的方式，那麼該值是一個 USVString,若是不是，將被轉成一個字符串。若是是傳入三個參數的方式，那麼該值是一個布爾值 (Blob)， 文件(File)， 或者一個 USVString,若是不是，將被轉成一個字符串。
• filename--可選
•   - 當第二個參數傳遞的是一個blob對象（Blob）或者file對象（File），filename參數就表明傳給服務端的文件名（一個USVString）。Blob 對象的默認文件名是 "blob"。
• formData.set('username', 'betiastar')

注意：若是對 FormData 對象插入一個 Blob 對象(Blob),那麼發送給服務器的請求頭部(header)裏的 "Content-Dispositon" 裏的文件名稱將會根據瀏覽器的不一樣而不一樣。

values()

• formData.values()
• var formData = new FormData()
• formData.append('key1', 'value1')
• formData.append('key2', 'value2')
• for(var value of formData.values()) {
•   console.log(value)
• }