關於 JavaScript 中「FormData」物件您需要了解的一切

在 JavaScript 中處理 HTML 表單中的資料時，您經常會遇到收集、操作資料並將其傳送到伺服器的需要。這就是 FormData 的用武之地——一個強大而靈活的表單管理 API。在這篇文章中，我們將詳細解釋 FormData 的工作原理、它的優點以及如何在現實場景中使用它。

---

什麼是表單資料？

FormData 是一個嵌入式 JavaScript 對象，它可以：

• 從 HTML 表單中進行簡單的資料收集。

• 使用 fetch API 或 XMLHttpRequest 將該資料傳送到伺服器。

• 使用二進位數據，例如檔案。

該物件根據 multipart/form-data MIME 類型自動格式化數據，使其成為發送複雜數據（包括文件）的理想選擇。

---

如何建立FormData物件？

建立一個空的 FormData 對象

如果要手動新增數據，請使用空的 FormData 建構子：

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

從表單建立 FormData 對象

如果您有 HTML 表單，則可以直接將表單參考傳遞給 FormData 建構函數，該構造函數將自動從中收集所有資料。

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

---

新增數據

使用 .append(key, value) 方法附加資料：

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

如果從 新增文件，只需使用 .files[0]:

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

---

讀取數據

要迭代 FormData 物件中的數據，請使用 for...of 迴圈以及 .entries() 方法：

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

---

向伺服器發送FormData數據

FormData 非常適合使用 fetch API 將資料傳送到伺服器。這是一個簡單的例子：

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

無需手動設定Content-Type header；FormData 自動執行此操作。

---

FormData 的優點

1. 使用檔案
   
   FormData 讓您可以直接從 輕鬆新增和傳送檔案欄位。

2. 自動序列化
   
   FormData 不會手動格式化數據，而是自動將其格式化為 multipart/form-data。

3. 靈活性
   
   輕鬆管理鍵值對，包括迭代和更新資料的能力。

4. 二元資料支援
   
   它非常適合發送圖像、PDF 或其他文件等二進位資料。

---

實踐範例：註冊表

這是一個完整的範例，我們從表單收集資料並將其發送到伺服器：

HTML 表單

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

---

有用的提示

• 如果要手動修改數據，請使用.set(key, value)而不是.append()。

• 您可以使用 .has(key) 方法檢查特定鍵是否存在。

• 要刪除數據，請使用 .delete(key)。

---

結論

FormData 是處理表單資料的強大工具。即使在處理文件時，它也可以輕鬆收集、操作和發送資料。它的靈活性以及與現代 JavaScript API 的輕鬆整合使其成為許多 Web 應用程式不可或缺的一部分。

以上是關於 JavaScript 中「FormData」物件您需要了解的一切的詳細內容。更多資訊請關注PHP中文網其他相關文章！