フォーム（input type=”file”）で画像を選択したタイミングでプレビュを表示する

フォームタグ「<input type=”file”>」で画像を選択したタイミングで、JavaScriptで画像のプレビュを表示する方法です。

これまで、フォームで選択した画像ファイルは、一度サーバにアップした後でないと、ブラウザ上でプレビュできないものだと考えておりました。
実際に任意のシステムでも、一度アップした画像を一時画像扱いでサーバに保存し、確認画面でプレビュして、戻るイベントで画像を削除、決定イベントでDBに本登録するといったような、めんどくさいロジックを組み立てていました。

それがJavaScriptだけで可能なことを最近知りました。。
セキュリティ的にどうとかの評価はひとまず置いておいて、その方法についてのメモです。

まず、ファイルタイプのフォームと画像プレビュ用のimgタグを用意します。

<input id="image" type="file" accept="image/*">
<img id="preview">

次に、JavaScriptでフォーム変更イベント時に画像情報を取得し、imgタグにセットします。

$('#image').on('change', function(){
	var $fr = new FileReader();
	$fr.onload = function(){
		$('#preview').attr('src', $fr.result);
	}
	$fr.readAsDataURL(this.files[0]);
});

非常にシンプルかつ簡単ですね。これまでの苦労はなんだったのか。
今回はjQueryをベースにしていますが、もちろんjQueryがなくても同様の処理は実装可能です。

動作確認サンプル

以下に実際の挙動を確認するサンプルを用意しました。

フォームを選択してJavaScriptで画像プレビュを表示するだけで、一切の情報はサーバに送信されません。