ファイルアップロード時にサムネイル画像を表示するJQuery

$(function() {
	$('input[id=photo_up]').change(function() {// upするinputのID

		var file = $(this).prop('files')[0];

		if (! file.type.match('image.*')) {
			$(this).val('');
			$('#photo_view').html('');
			return;
		}

		var reader = new FileReader();

		reader.onload = function() {
			$('#photo_view').css('background-image','url('+reader.result+')');
		}
		
		reader.readAsDataURL(file);
	});
});

ファイルアップロード時にサムネイル画像を表示するJQuery

合言葉は初心者の使いやすいJQuery、志知と申しますこんばんは。
今回は私が愛用しているJQueryを一つ紹介してみたいと思います。

合言葉通り内容は(ある程度)初心者向け。
コピーペーストすればすぐ使えますよ、ってレベルの内容を目指します。
ついでにこのJquery自体は私もコピーさせて頂き使用しているものです。

参考サイト様

あとこのJQueryはHTML5のFILE APIを使用しているため未対応ブラウザでは機能しません。
そんなわけで解説。

コード解説

$('input[id=photo_up]').change(function() {

この命令はid属性 photo_upを指定したinput[type=”file”]で
画像を選択した時に実行されます。

バリデーション関係は割愛。

var reader = new FileReader();

reader.onload = function() {
	$('#photo_view').css('background-image','url('+reader.result+')');
}

これでid属性 photo_viewの入れ物に画像を表示します。
入れ物もjsで作ってしまう方法もありますが
個人的に入れ物は元から見えている方が好きなのでこうしています。

背景画像の理由を

で、コードを読んだ方はお気づきでしょう。
このコードは背景画像として表示させています。何故か。

これは画像の大きさがバラバラでも一定枠内に表示させるためです。

例えば縦が大きい、横が大きい。
一定ではない画像比率をボックスに納める場合
どちらか大きい方に合わせて収まり、短い方は余白ができます。
サムネイルとしては非常に見窄らしいですね。

そして入れ物に対してimgタグのサイズを合わせるプラグインもありますが
IEやEdgeでうまく動かなかったり、前準備も必要です。

ではもっとお手頃にきっちり枠内に収められないのか。

その答えが背景画像です。
css3では背景画像のサイズ設定に『枠一杯』が設定できます。

background-size: cover;

これを使えばなんということでしょう、
なんの前準備をしなくてもサムネイルが一定の大きさで表示できるではありませんか。
※当然CSS3の使えない古いブラウザーでは反応しませんが。

大変便利…。
ところで背景として表示させるということは中身のない空ボックスを作ることになります。

空ボックスなんて作ってたまるかよ！

って方は文字を非表示にしたり選択不可にしたりと方法を色々お試しください。
私はdivとspanの空ボックスはあってもいいと思いますけど。

Tweet