WEB/システム/IT技術ブログ

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

update : 2020/09/27

フォームタグ「<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で画像プレビュを表示するだけで、一切の情報はサーバに送信されません。

B!

Reference

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives