通過ajax上傳文件file、input等 - formData使用說明

formData 使用說明

01 - 什麼是formData

使用鍵值對的方式模擬表單控件，可以使用XML HttpRequest的send()方法來異步提交表單數據。

02 - 爲什麼使用formData

我們在進行數據交互時， 一般會採取兩種方式，1）表單提交的方式 2）ajax請求的方式

1）表單提交的方式，使用表單提交的方式可以提交表單中file文件（form表單的編碼方式需要設置爲 enctype=“multipart/form-data”）

2. ajax請求方式，在使用ajax請求時，一般通過serialize方法對錶單數據進行序列化後進行提交。但是serialize方法只能對普通表單控件進行序列化，但是對流文件無法序列化。即無法實現文件上傳

而formData接口可以將同一個表單中的普通控件和文件控件同時上傳

03 - 如何使用formData

Constructor

FormData()

用於新建一個formData對象

代碼示例

let formData = new FormDta();

Method

formData.append()

該方法向FormData對象添加一個新值到已存在的鍵中，如果該鍵不存在，則會創建一個新鍵。

語法
append方法有兩個版本：一個是含有兩個參數的版本，一個是含有三個參數的版本

    formData.append(name , value);
    formData.append(name , value , fileName);

參數說明：

**name**：表單控件的名稱，即name值
**value**：表單控件的值，即value值
**fileName（可選）**：傳遞給服務器一個文件名稱 ， 當Blob或file類型作爲第二個參數時，Blob默認值爲“blob”。File默認的值爲文件名

代碼示例

var formData = new FormData();
formData.append("userName","july");
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

FormData.delete()

FormData 接口的 delete() 方法會從 FormData 對象中刪除指定鍵，即 key，和它對應的值，即 value。

語法

formData.delete(name)

參數說明

name：眼刪除的鍵的名稱（key）值

代碼示例

formData.delete('username');

FormData.entries()

The FormData.entries() 方法返回一個 iterator對象 ，此對象可以遍歷訪問FormData中的鍵值對。其中鍵值對的key是一個 USVString 對象；value是一個 USVString , 或者 Blob對象

語法

formData.entries();

代碼示例

// Create a test FormData objectvar formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairsfor(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

// 執行結果
key1, value1
key2, value2

formData.get()

用於返回formData對象中指定鍵值的第一個值，注意：只會返回第一個值，如果該鍵值存在多個值並想要獲取全部值，使用getAll方法

語法

formData.get(name)

參數

name：想要獲取值的鍵名

代碼示例

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

formData.getAll()

用於返回指定鍵名的全部值

語法

formData.getAll(name)

參數

name:所對應的鍵名

代碼示例

formData.append('username', 'Chris');
formData.append('username', 'Bob');

formData.getAll('username');// ['Chris' , 'Bob'] ;

formData.has()

用於判斷formData對象是否含有某個鍵名

語法

formData.has(name);

參數說明

name:指定的鍵名

formData.set()

用於向formData對象中設置某個key鍵的新值。注意：set方法會覆蓋之前的值從而改變key的值，與append不同，append是不管之前的值是什麼都不會影響，直接插入新值

語法

formData.set(name,value); // 第一種語法，還有兩個參數
formData.set(name , value , fileName); // 第二種語法，含有三個參數

參數說明

name：需要設置新值的key鍵名
value:需要設置的新值
fileName（選填）：如果blob或file做第二個參數的時候，fileName會默認傳遞文件名稱到服務器

formData.keys()

獲取到能夠遍歷的所有key值

語法

formData.keys()

代碼示例

// 先創建一個 FormData 對象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 輸出所有的 key
for (var key of formData.keys()) {
   console.log(key); 
}

formData.values()

獲取到所有的value值

語法

formData.values()

代碼示例

//創建一個FormData測試對象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

//顯示值
for (var value of formData.values()) {
   console.log(value); 
}

// 輸出結果
value1
value2

04 - 使用formData應注意些什麼

1）使用form表單初始化formData對象上傳文件

HTML代碼

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

javaScript代碼

$.ajax({
    url: '/uploadFle',
    type: 'POST',
    cache: false, // 設置爲false，不需要從瀏覽器緩存，默認爲true
    data: new FormData($('#form')[0]),
    processData: false, // 對數據的處理方式，默認爲true，會將數據處理爲對象格式
    contentType: false, //當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。
})

注意事項
1 - form 必須設置 enctype爲"multipart/form-data"
2 - ajax 請求的cache屬性設置爲false ， 避免從瀏覽器讀取緩存
3 - ajax請求的processData屬性設置爲false，默認情況下爲true，會將數據處理爲對象格式
4 - ajax請求的contentType屬性設置爲false，默認情況下爲"application/x-www-form-urlencoded",該格式支持大多數數據的上傳

2）通過input控件上傳文件

javaScript對象

let formData = new FormData();
formData.append("file" , $("#file")[0].files[0]);
$.ajax({
    url: '/uploadFile',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
})