XMLHttpRequestでファイルを送信する

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

「type="file"」のinput要素で選択したファイルをサーバーに送信するときは、XMLHttpRequestオブジェクトとFormDataオブジェクトを組み合わせて使うことで行います。

XMLHttpRequestオブジェクトでサーバーにリクエスト（要求）を送信するsendメソッドを実行するときに、選択したファイルをセットしたFormDataオブジェクトをパラメータに指定することでサーバーにファイルを送信することができます。

以下の例では、ページにあるinput要素でファイルを選択したタイミングで、「/entry.php」にファイルを送信します。

HTML コード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<form method="post" action="">
		<input type="file" name="input_file">
	</form>
</article>

JavaScriptのコードは以下のようになります。
input要素をname属性で取得して、イベントリスナーにイベントchangeを登録することでファイルを選択したタイミングにファイル送信するように設定します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	const xhr = new XMLHttpRequest();
	const fd = new FormData();

	// (1) 送信先を指定
	xhr.open('post', '/entry.php');

	// (2) ファイルが選択されたときに処理を実行するようイベントリスナーに登録
	const input_file = document.querySelector('input[name=input_file]');
	input_file.addEventListener('change', (e) => {

		// (3) 選択したファイルをFormDataオブジェクトにセット
		fd.append('uploadfile', e.target.files[0]);

		// (4) ファイル送信
		xhr.send(fd);
	});

	// (5) 通信が完了したらレスポンスをコンソールに出力する
	xhr.addEventListener('readystatechange', () => {

		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log(xhr.response);
		}
	});
});

「/entry.php」は受け取ったファイルデータからファイル名を取り出して、文字列のデータとしてレスポンスを返します。

PHP コード例

<?php

echo $_FILES['uploadfile']['name']; // 受け取ったファイル名をレスポンスとして送信
exit;

JavaScriptコードの(1)では送信メソッドと送信先のURLを指定します。
データを送信するときはPOSTメソッドで送信することが多いですが、今回も同様にPOSTメソッドを使用して通信を行います。

(2)はファイル選択時に送信処理を実行するようにイベントリスナーに登録を行います。
イベントchangeはフォームに入力があったときに発生するイベントです。
今回のケースではファイル選択が入力操作に該当します。

続いて、イベントを検出したときの処理として(3)では選択されたファイルをFormDataオブジェクトにセットします。
ファイルの情報は「e.target.files[0]」から取得できます。
その後に(4)のsendメソッドを実行することで実際にファイルデータを「/entry.php」へ送信します。

最後に、(5)でサーバーから受け取った文字列データを「console.log(xhr.response);」でコンソールに出力しています。

サーバー側ではファイルのデータを受け取っているため、ファイルデータのチェックをしたり保存するような処理を実行することができます。
詳しくは以下の別記事を参照してください。

• アップロードしたファイルを特定のディレクトリに保存する
• POST通信でアップロードされたファイルか確認する
• ファイルの種類（MIMEタイプ）を確認する