JavaScriptFormDataAPIを使用したカスタムフォームの作成

エッジケースがない限り、フォームの作成は簡単です。その後、ベーコンの脂肪が排水管に流れ込み、パイプが台無しになります。そのため、ツールベルトに追加のツールが必要になる場合があります。 FormData APIはツールの1つです。

コアFormDataAPI

FormDataには多くの機能がありますが、すべてのブラウザーで機能する唯一の方法はappendです。人々がベーコンの写真を共有するためのソーシャルアプリケーションを作成したいとします。ここでは、ユーザーがタイトルと作者の名前を含む写真を送信できるフォームを作成します。 HTMLマークアップは次のようになります。

<input type="text" name="author"  id="author-input" />
<input type="text" name="title" id="title-input" />
<input type="file" name="picture" id="picture-input" />
<button id="submit-button">SUBMIT</button>

データを処理するために、次のコードを作成できます。

モジュール：bacon-form.js

const inputs = document.getElementsByTagName('input');
// This object will keep track of the changes of inputs
const applicationState = {
  title: "",
  author: "",
  picture: ""
}

document.getElementById('submit-button').onclick = async () => {
  // We create a new form object
  const form = new FormData();
  // we append each element to the form
  form.append('title', applicationState.title);
  form.append('author', applicationState.author);
  form.append('picture', applicationState.picture);

  const res = await fetch('https://postman-echo.com/post', {
    method: 'POST',
    mode: 'no-cors',
    body: form
  });
  // ... Do something with the response
}

// The rest of this code is functional
// It is not directly related to FormData

// This for loop reflects input changes to the application's state
for (let i = 0; i < inputs.length; i++) {
  const input = inputs[i]
  const inputName = input.name

  input.onchange = (e) => {
    let value = e.target.value
    // updating the application state according to the input the user interacted with
    if (inputName === 'picture' && e.target.files[0]) {
      setPicture(e.target.files[0]);
    } else {
      applicationState[inputName] = value;
    }
  };
}
// setPicture takes a file reads it as a base64URL and assigns that value to application.picture
const setPicture = (file) => {
  const fr = new FileReader();
  // Reading the data and encoding it as base64 to send it to the server
  fr.readAsDataURL(file);
  // When the data is done loading we assign it to picture
  fr.onloadend = (fileData) => {
    applicationState.picture = fileData.target.result;
  }
}

これが私たちの入力である場合：

次に、送信ボタンを押すと、おおよそ次のリクエストヘッダーが表示されます。

{
  "Accept-Encoding": "gzip, deflate, br",
  "Connection": "keep-alive",
  "Content-Length": "4369",
  "Content-Type": "multipart/form-data",
  "Host": "postman-echo.com",
  "Origin": "null",
  "Sec-Fetch-Mode": "no-cors",
  "Sec-Fetch-Site": "cross-site"
}

そして次の体：

{
  "title": "Alligator Bacon",
  "author": "Jack Misteli",
  "picture": "data:text/javascript;base64,iVBORw0KGgoAA......."
}

FormDataコンストラクターはフォームデータを引数として取ることができることに注意してください。だからあなたはすることができます：

モジュール：regular-form.html

<form id="user-form">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="file" name="picture" id="picture-input"/>
  <input type="submit">
</form>
<script>
  document.getElementById('user-form').onsubmit = async function (e) {
    e.preventDefault();
    // here `this` is the user-form HTML element
    const form = new FormData(this);
    ///... send form to server
  }
</script>

もう1つの重要な落とし穴は、appendがキーがすでに存在する場合、それを上書きしないことです。

モジュール：double-bacon-form.js

const form = new FormData();
form.append('baconType', 'pork');
form.append('baconType', 'vegan');
// When you send your form it will look like this:
// {
//  baconType: pork
//  baconType: vegan
//}

キー値を上書きしたい場合は、他の機能を使用する必要があります。

高度なフォーム

FormDataコンストラクターとappendメソッドは、すべてのブラウザーで使用できます。他のほとんどの方法はかなり自己記述的です：

FormData.has(key)：キーがフォームに存在するかどうかを確認します。
FormData.set(key, value)：キーに関連付けられている値を変更します。
FormData.delete(key)：キーに関連付けられているエントリを削除します。
FormData.get(key)：キーに関連付けられた最初の値にアクセスします。
FormData.getAll(key)：キーに関連付けられたすべての値の配列を作成します。
FormData.keys()、FormData.values()、FormData.entries()：すべてのキー、関連する値、またはFormDataのエントリのみを取得するために使用されるイテレーター。

🥓質問がある場合は、記事へのリンクを付けてTwitterで起動できます。できる限り回答します！