JavaScript >> Javascript 文檔 >  >> Tags >> API

在 JavaScript 中使用 FormData API

FormData 接口提供了一種簡單的方法來存儲對應於 HTML 表單字段及其值的鍵值對。它適用於所有現代瀏覽器和 Internet Explorer 10+。

顧名思義,FormData 接口旨在保存表單數據,允許我們在 JavaScript 中構建一個表示 HTML 表單的對象。

當您需要將表單數據異步發送到 RESTful API 端點時,通常會使用它。例如,使用 Fetch() 上傳單個或多個文件 API,XMLHttpRequest 接口,或者axios。

創建一個對象

創建FormData的對象 接口,你可以用 new 調用它的構造函數 操作符如下圖:

const fd = new FormData();

在上面的代碼中,fd 變量引用 FormData 的一個實例 .您現在可以調用對像上的方法來添加、刪除或更新呈現表單字段的鍵值對。

方法

FormData 接口提供以下方法:

  • append() — 將新的鍵值對附加到對象。如果鍵已存在,則將該值附加到該鍵的原始值。
  • delete() — 從對像中刪除一個鍵值對。
  • entries() — 返回一個迭代器對象,允許您循環訪問添加到此對象的所有鍵值對。
  • get() — 返回與給定鍵關聯的第一個值。
  • getAll() — 返回與給定鍵關聯的所有值的數組。
  • has() — 返回一個布爾值,指示給定鍵是否存在於此對像中。
  • keys() — 返回一個迭代器對象,該對象可用於列出該對像中的可用鍵。
  • set() — 為現有鍵設置新值。替換現有的鍵值很有用。
  • values() — 返回一個迭代器對象,該對象可用於列出該對像中的所有可用值。

如何使用?

假設我們正在開發一個允許用戶上傳個人資料圖片的 Web 應用程序。我們想創建一個 HTML 表單,允許用戶上傳帶有名稱和電子郵件地址的圖像。

我們的 HTML 標記如下所示:

<form id="profile-form">
    <input type="text" id="name" name="name" placeholder="Name">
    <input type="email" id="email" name="email" placeholder="Email Address">
    <input type="file" id="avatar" name="avatar">
    <button>Submit</button>
</form>

現在將一個事件監聽器附加到表單提交時將調用的表單:

const form = document.querySelector('#profile-form');

// Attach event handler to form
form.addEventListener('submit', (e) => {
    // Disable default submission
    e.preventDefault();

    // TODO: submit the form manually
});

上面的代碼添加了一個submit 表單的事件處理程序。在事件處理函數內部,我們禁用默認操作以支持使用 FormData 手動提交表單 界面。

接下來,創建 FormData 的新實例 並將每個元素附加到其中:

const name = document.querySelector('#name');
const email = document.querySelector('#email');
const avatar = document.querySelector('#avatar');

// Create a new FormData object
const fd = new FormData();
fd.append('name', name.value);
fd.append('email', email.value);
fd.append('avatar', avatar.files[0]);

最後貼出FormData fetch() 的對象 API 並在控制台上記錄響應:

fetch('/update-profile', {
    method: 'POST',
    mode: 'no-cors',
    body: fd
}).then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error(err));

下面是完整的示例代碼:

const form = document.querySelector('#profile-form');

// Attach event handler to form
form.addEventListener('submit', (e) => {
    // Disable default submission
    e.preventDefault();

    // Submit form manually
    const name = document.querySelector('#name');
    const email = document.querySelector('#email');
    const avatar = document.querySelector('#avatar');

    // Create a new FormData object
    const fd = new FormData();
    fd.append('name', name.value);
    fd.append('email', email.value);
    fd.append('avatar', avatar.files[0]);

    // send `POST` request
    fetch('/update-profile', {
        method: 'POST',
        mode: 'no-cors',
        body: fd
    }).then(res => res.json())
        .then(json => console.log(json))
        .catch(err => console.error(err));
});

使用 FormData 上傳多個文件 界面,看看這篇文章吧。

傳遞 form 參考

請注意,FormData 構造函數可以引用 HTML <form> 元素作為參數。提供時,FormData 對象將使用表單的當前鍵值填充,使用每個元素的名稱屬性作為鍵和它們提交的值作為值。它還包括文件輸入內容。

所以不要手動調用 append() 每個輸入元素的方法,您只需執行以下操作:

const fd = new FormData(e.currentTarget);

e.currentTarget 屬性始終引用其事件偵聽器觸發事件的元素。在我們的例子中,它是 <form> 元素。

覆蓋一個鍵

要記住的另一件重要事情是 append() 如果鍵已經存在,方法不會覆蓋它。設計允許單個鍵有多個值:

const fd = new FormData();
fd.append('size', 'L');
fd.append('size', 'XL');

console.log(fd.getAll('size')); // ["L", "XL"]

要覆蓋密鑰,請使用 set() 替代方法:

// ...
fd.set('size', 'M');

console.log(fd.getAll('size')); // ["M"]

瀏覽器兼容性

append() 除外 適用於所有瀏覽器的方法,所有其他方法僅在現代瀏覽器中可用。


Tutorial JavaScript 教程
  1. Angular 材質模板 - 開源和免費 2022

  2. 如何創建 GUID/UUID

  3. 獲得 100 美元並在 DigitalOcean 上部署您的應用程序

  4. 關於 React 和 TypeScript 的一些思考

  5. 使用 HTML Canvas 截取視頻的屏幕截圖

  6. JS 是什麼解釋型語言?

  7. TypeScript 和 React 入門

  1. Angular Rxjs 中的 EventEmitter

  2. JavaScript if 語句 |基本代碼

  3. javascript Es6 中的解構函數

  4. 在本地 html 文件中使用 JavaScript 設置 Cookie

  5. 為什麼howSum 解決方案在Javascript 中有效,而在Python 中無效? (動態編程)

  6. Nextjs UseEffect 未在路線更改時呈現

  7. 獲取所有 Javascript 變量?

  1. 設計模式 - 模板方法

  2. 你的 SSR 很慢,你的開發工具在騙你

  3. 如何將 JSON 文件上傳到 firebase 並將其作為來自網絡的列表項進行訪問?

  4. 極簡主義作品集 - 提交