HTML

HyperText Markup Language <input type="file">

この記事では、ユーザーが選んだファイルをフォームから送信する<input type="file">の基本と、フォーム側の送信設定を説明します。

<input type="file">

　inputタグの type属性で type="file"を指定すると、ファイル名の入力フィールドと参照ボタンが表示され、サーバーへ送信するファイルを選択できるようになります。サーバー側にはファイルを受け取るためのプログラムが必要となります。

　inputタグに type="file"を指定する場合、formタグには method="post"、および、enctype="multipart/form-data"を指定するようにしてください。

type="file": サーバーにファイルを送信する。
name: フォーム部品に名前をつける。
size: フォーム部品のサイズを指定する。

Sample

ファイルを選択:

ファイルを選び直したときは、前回の一覧を消して現在選択中のファイルだけを表示します。結果領域にはrole="status"とaria-live="polite"を付け、選択結果の更新を支援技術にも伝えています。


<label for="filebox">ファイルを選択:</label>
<input id="filebox" type="file">
<div id="result" role="status" aria-live="polite" aria-atomic="true"></div>

<script>
	window.addEventListener("load", function () {
		document.getElementById("filebox").addEventListener("change", function (e) {
			let files = e.target.files;
			const result = document.getElementById("result");
			result.replaceChildren();
			for (var i = 0; i < files.length; i++) {
				const item = document.createElement("div");
				item.textContent = files[i].name;
				result.appendChild(item);
			}
		});
	});
</script>