HTML

HyperText Markup Language <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


<input id="filebox" type="file">
<div id="result"></div>

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