Javascriptを使ってsubmitと同じ形式で画像ファイルをアップロードする方法

2023年9月9日

こんにちは！

今回は「Javascriptを使ってsubmitと同じ形式で画像ファイルをアップロードする方法」について共有したいと思います。

画像ファイルをアップロードする方法は<form>タグとsubmitボタンを用いることで実現できると思います。
しかし、バリデーションなどを追加したい場合はJavascriptから送信する必要があります。
画像ファイルはbase64を取得して送信することもできますが、今回はsubmitボタンを押したときと同様の形式で送りたいと思います。

Javascriptを使ってsubmitと同じ形式で画像ファイルをアップロードする方法

以下にサンプルコードを交えてお伝えします。

ポイント

new FormData()：FormDataオブジェクトを新しく生成

<!DOCTYPE html>
<html>
  <head>
    <title>ファイルアップロード</title>
  </head>
  <body>
    <h1>ファイルをアップロードしてください</h1>
    <div>
      <input id="file" type="file" name="file">
      <button onclick="handleClick()">アップロード</button>
    </div>
    <script>
      const handleClick = async () => {
        const files = document.getElementById('file')?.files;
        if (!files || files.length === 0)  {
          alert('ファイルが選択されていません。');
          return;
        }
        const postData = new FormData();
        postData.append('file', files[0]);

        try {
          const response = await fetch('http://localhost:3031/upload', {
            method: 'POST',
            body: postData
            /* クロスオリジンの場合はヘッダーに追加するためコメント解除
              headers: {
                'mode': 'cors',
                'credentials': 'include'
              },
            */
          });
          const data = await response.json();
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
  
        } catch (error) {
          console.log(error);
        }
      }

    </script>
  </body>
</html>

以上、お疲れさまでした〜🍵