JavaScript

レシピ

Ajax

Fetch APIでファイルを送信する

選択したファイルをFetch APIを使ってサーバーへ送信する方法について解説します。

この記事のポイント

  • 送信するファイルデータをFormDataオブジェクトにセットして、Fetch APIで指定した送信先へ送信する
  • FormDataオブジェクトには複数のファイルをセットして送信することも可能

目次

Fetch APIでファイルをサーバーへ送信する

ファイル選択(type=”file”)のinput要素などで選択したファイルは、Fetch APIFormDataオブジェクトを組み合わせると簡単にをサーバーへ送信することができます。

以下の例では、送信ボタンをクリックすると選択したファイルをFormDataオブジェクトにセットして、Fetch APIでサーバーに送信します。

HTML コード例

<form method="post" action="">
  <input type="file" name="input_file">
  <input type="submit" id="btn_submit" name="btn_submit" value="送信">
</form>

JavaScriptのコードは以下のようになります。

ポイントになるのは赤字になっているFormDataオブジェクトを使った箇所になります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

  // (1) 送信ボタンのHTMLを取得
  const btn_submit = document.getElementById("btn_submit");

 // (2) FormDataオブジェクトの初期化
  const fd = new FormData();

  btn_submit.addEventListener('click', (e)=> {
    e.preventDefault();

    // (3) ファイル選択のinput要素を取得
    const input_file = document.querySelector('input[name=input_file]');

    // (4) FormDataオブジェクトにファイルデータをセット
    fd.append('uploadfile', input_file.files[0]);


    // (5) フォームの入力値を送信
    fetch( 'regist.php', {
      method: 'POST',
      body: fd
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });
  });

});

input要素に入力された値は通常はvalue属性から取得しますが、選択されたファイル情報はfiles属性から参照します。
files属性は選択されたファイルの数に関係なく配列形式になっているため、1つ目のファイルを取得するときは「files[0]」のようにすると参照することができます。

FormDataオブジェクトへのファイルのセットはappendメソッドを使います。
第1パラメータの「uploadfile」はデータのラベルになり、サーバー側で受け取ったファイルはこのラベルを使ってファイル情報を参照することができます。

複数の選択されたファイルをサーバーへ送信する

先ほどは選択するファイルが1つであることを想定していましたが、同じ方法を使って複数ファイルを送信することも可能です。
複数の選択したファイルをFormDataオブジェクトにセットする箇所だけが異なります。

まず、input要素で複数ファイルを選択できるようにmultiple属性を追加します。

HTML コード例

<form method="post" action="">
  <input type="file" name="input_file" multiple>
  <input type="submit" id="btn_submit" name="btn_submit" value="送信">
</form>

JavaScriptのコードは以下のようになります。

ポイントになるのは赤字になっているFormDataオブジェクトを使った箇所になります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

  // (1) 送信ボタンのHTMLを取得
  const btn_submit = document.getElementById("btn_submit");

 // (2) FormDataオブジェクトの初期化
  const fd = new FormData();

  btn_submit.addEventListener('click', (e)=> {
    e.preventDefault();

    // (3) ファイル選択のinput要素を取得
    const input_file = document.querySelector('input[name=input_file]');

    // (4) FormDataオブジェクトにファイルデータをセット
    for(let index in input_file.files) {
        fd.append('uploadfile' + index, input_file.files[index]);
    }

    // (5) フォームの入力値を送信
    fetch( 'regist.php', {
      method: 'POST',
      body: fd
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });
  });

});

(4)のところで、選択されたファイルの数だけループを繰り返してFormDataオブジェクトにデータをセットしていきます。
appendメソッドの第1パラメータに指定するラベルは重複するとセットしたデータを上書きしてしまうため、必ず一意になるようにします。

以上のコード変更のみで、複数ファイルを選択したときについてもサーバーに送信することができます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。