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

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

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

以下の例では、送信ボタンをクリックすると選択したファイルを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オブジェクトを使った箇所になります。

JS コード例

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オブジェクトを使った箇所になります。

JS コード例

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パラメータに指定するラベルは重複するとセットしたデータを上書きしてしまうため、必ず一意になるようにします。

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

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

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