JavaScriptでファイルアップロードを受け付けるinput type=’file’の使い方

JavaScriptでローカルファイルのアップロードを受け付けて、情報を取得したい

Input要素のtype属性にfileを指定すると、ファイル選択フォームが表示され、ファイルのアップロードを行うことができます。

ファイルは一旦ブラウザに保存され、追加で処理を行ってサーバーにデータを送信する形となります。

商用サイトの多くは外部ライブラリを使うことが多いですが、手軽に実装できるため、こちらの方法もまだまだ使われています。

プロパティ

プロパティ役割
インプット要素.files選択されたファイルの配列を格納配列
input要素のfileプロパティの仕様

サンプルコード

サンプルコードでは画像をアップロードさせて、そのタイトルを取得してアラートで表示するコードを紹介します。multiple属性を記載することで、同時に複数のファイルを受け付けることが可能です。

画像はpng属性のみを対象にしています。

実際にサーバーに送信する場合は、別途PHPなどの知識が必要です。

Output
Pug
.container.mt-5
	#targetArea
		label
			input#targetFileButton.form-control-file(type="file" multiple accept=".png")
JavaScript
const targetFileButton = document.getElementById( 'targetFileButton' );

targetFileButton.addEventListener( 'change', onChange );

function onChange( event ) {
	const targetFileTarget = event.target;
	//取得される値は配列
	const targetFiles = targetFileTarget.files;
	//最初の値だけ格納
	const targetFiles0 = targetFiles[0];
	//今回は ファイルの名前だけ出力
	alert( `選択された最初のファイルの名前は${targetFiles0.name}です。` );
}
補足
  1. このサンプルコードはファイルの受付は複数可能ですが、ファイル名の出力は最初のファイル1つだけにしています。(学習目的なので・・)
  2. また、アップロードされたファイルはブラウザ上に保存され、当サービスのサーバーに送信されることはありませんのでご安心ください。
  3. タイトル名以外の情報を出力するにはこれだけではたりません。次ページ以降も参照してください。
インストラクター