FormData.append詳解

一、formdata.append怎麼用

FormData.append() 函數用於將一個新的數據項添加到 FormData 對象。以下是使用示例：

var formdata = new FormData();
formdata.append('username', 'ABC');
formdata.append('email', 'ABC@example.com');

通過上述示例代碼，可以在 FormData 對象里添加一個鍵值對。append() 方法接收兩個參數，第一個參數 key 即是表單元素的 name 值，也是該數據項的鍵名，第二個參數即是該數據項的值。

此外，如果需要上傳文件，則需要用到 fileReader 的相關API,以一個上傳圖片的為例：

function preview() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var img = document.getElementById('preview');
        img.src = e.target.result;
        var formdata = new FormData();
        formdata.append('image',file); 
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);
        xhr.send(formdata);
    }
}

在該示例中，首先需要構造一個上傳文件的 input 元素，再監聽該元素的 onchange 事件。當用戶選擇了文件後，會自動觸發事件處理函數 preview()。在該函數中，從 fileInput 元素中讀取 file 對象並使用 FileReader API讀取圖片信息並顯示到 img 元素上。接着創建 FormData 對象並將 file 對象添加到其中，通過 XMLHttpRequest 發送至服務器端。在服務器端，通過 req.files.file 屬性即可獲取到文件對象。

二、formdata.append函數沒用

無論是表單元素的值，還是文件對象，都可以通過 append() 方法添加到 FormData 對象中。但是，如果表單元素的值是一個空字符串或者為 null，那麼通過該方法添加到 FormData 對象中時會被忽略。

表單中的一些元素是如下：

    北京
    上海
    廣州

可以看到，幾個元素都有默認值。要注意的是，select 元素的默認值是 selected 屬性，而不是 value 屬性。如果未指定 selected 屬性，那麼默認選中的就是第一個 option 標籤。對於 checkbox 元素，如果未指定 checked 屬性，那麼默認是不選中的。

對於 textarea 標籤，如果不設置 value 屬性，默認是一個空字符串。設置了 value 屬性就會將默認值覆蓋掉。在提交表單時，無論默認值是什麼，都會進行重置。如果想要獲取表單元素的默認值，可以通過 js 獲取元素的 value 屬性。

三、formdata.append無效果

在一些情況下，使用 formdata.append 添加到 FormData 對象中的數據項並沒有達到預期效果，這可能會給開發帶來困擾。

首先要考慮是否將 FormData 對象通過 XMLHttpRequest 發送到服務器端，如果沒有發送，則 setData() 方法會返回 undefined，請求頭中也不會有該參數。

其次，需要確保添加的數據項的鍵名和鍵值是有效的。如果鍵名或鍵值無效，該數據項也不會被添加到 FormData 對象中。需要注意的是，鍵名不能包含特殊字符，比如空格、+、&、=等；鍵值可以是任何類型，包括字符串、數字、布爾型、對象、文件對象等。

還有一種情況是，在使用 XMLHttpRequest() 發送 FormData 對象時，服務器端程序的處理方式可能也會影響添加數據項的效果。比如，對於 PHP、Node.js、.NET 等服務器端程序，需要根據參數的名稱和類型進行相應的解析，才能正確獲取數據。如果在發送請求的過程中沒有對參數進行有效的編碼，那麼極有可能導致參數格式錯誤、接收不到參數等問題。

四、formdata.append第三個參數選取

1、用於設定文件名參數（filename）

let file = document.getElementById('fileInput').files[0];
let form = new FormData();
form.append('file', file, 'test.jpg');

這樣就設定了文件名參數為 test.jpg, 上傳至服務器端時，以該文件名存儲至文件系統。

2、用於設定 content-type 參數

var xhr = new XMLHttpRequest(),
formData = new FormData(),
fileToSend = document.getElementById('file').files[0];
formData.append("file", fileToSend, "example.png");
xhr.open("POST", "example.php");
xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.send(formData);

該參數用於設定提交內容的類型，一般用於後端解析數據串。

3、其他參數

實際上，對於 formdata.append，只要第一個參數 name 和第二個參數 value 合法即可，其他參數都是可選的。如果有第三個參數，則表明當前 name 值是一個文件對象並且設定了文件名或者 content-type。

如果沒有設定第三個參數，則表明 current value 將視為一個普通的字符串。此時，對應的 value 值將會被視為 text/plain 類型。所以不需要縮小數據類型，一律按照String打入即可。