Javascript FormData() 如何使用 ?

 FormData 是 JavaScript 中的內建對象，用於構建用戶提交的表單數據，並將其以鍵值對的形式傳遞到伺服器。它特別適合處理文件上傳和支持多部分表單數據的請求。

---

1. 基本用法

創建 FormData 對象

可以從現有的 <form> 元素中初始化，也可以手動構建。

javascript

// 從現有表單創建 FormData
const formElement = document.querySelector("form");
const formData = new FormData(formElement);

// 手動創建 FormData
const manualFormData = new FormData();
manualFormData.append("username", "Alice");
manualFormData.append("age", "25");

---

2. FormData 方法

• append(name, value, fileName)：添加一個鍵值對到 FormData 對象中。
• delete(name)：刪除指定鍵名的數據。
• get(name)：獲取指定鍵名的第一個值。
• getAll(name)：獲取指定鍵名的所有值（返回數組）。
• has(name)：檢查是否包含指定鍵名。
• set(name, value, fileName)：設置指定鍵名的值（如果已存在則覆蓋）。

範例

javascript

const formData = new FormData();

// 添加數據
formData.append("username", "Alice");
formData.append("age", "25");
formData.append("hobbies", "reading");
formData.append("hobbies", "traveling"); // 可以添加多個值

// 獲取數據
console.log(formData.get("username")); // Alice
console.log(formData.getAll("hobbies")); // ["reading", "traveling"]

// 更新數據
formData.set("username", "Bob");
console.log(formData.get("username")); // Bob

// 刪除數據
formData.delete("age");
console.log(formData.has("age")); // false

---

3. 文件上傳

FormData 非常適合處理文件上傳，尤其是與 <input type="file"> 配合使用。

範例

HTML：

html

<form id="uploadForm">
  <input type="text" name="username" value="Alice" />
  <input type="file" name="file" />
  <button type="button" onclick="upload()">Upload</button>
</form>

JavaScript：

javascript

function upload() {
  const form = document.getElementById("uploadForm");
  const formData = new FormData(form);

  fetch("https://example.com/upload", {
    method: "POST",
    body: formData
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));
}

---

4. 遍歷 FormData

可以使用 for...of 迴圈來遍歷 FormData 對象中的鍵值對。

範例

javascript

const formData = new FormData();
formData.append("username", "Alice");
formData.append("age", "25");

for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}
// 輸出:
// username: Alice
// age: 25

---

5. 與 Content-Type 頭的關係

• 使用 FormData 時，不需要手動設置 Content-Type 為 multipart/form-data。
• 瀏覽器會自動為請求添加正確的 Content-Type 和邊界值。

錯誤示範

javascript

fetch("https://example.com/upload", {
  method: "POST",
  body: formData,
  headers: { "Content-Type": "multipart/form-data" } // 不要這樣做
});

正確用法

javascript

fetch("https://example.com/upload", {
  method: "POST",
  body: formData
});

---

6. 使用場景

1. 處理表單數據提交

   • 直接將表單的數據傳遞到伺服器。

2. 文件上傳

   • 支持多文件和單文件上傳。

3. 動態構建數據

   • 手動添加或修改需要發送的數據。

---

7. 注意事項

1. 跨域請求

   • 確保伺服器設置了正確的 CORS 頭。

2. 不支持 JSON 格式

   • 如果伺服器需要 JSON 格式數據，需要手動轉換：

     javascript
     
     const data = { username: "Alice", age: 25 };
     fetch("https://example.com/api", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(data)
     });
     

3. 文件限制

   • 瀏覽器可能對文件大小和數量有一定限制，需要檢查用戶選擇的文件是否符合條件。

---

總結

FormData 是處理表單和文件上傳的強大工具，通過簡單的 API 實現動態數據構建和提交。無需額外的序列化操作，非常適合應用於現代 Web 開發中需要和伺服器交互的場景。