画像アップロード時にjQueryでサムネイルを表示する方法

通常、画像アップロードを行う際は一度フォームの内容を全て送信しなければいけません。自分がアップしたファイルを確認するのにひと手間かかってしまいます。

しかし、ajaxを使用する事により画像アップロード時に簡単にファイルを確認する事ができるようになります。
jQueryを使用したやり方を紹介している「Image Uploads with 100% Less Suck. Guaranteed.」というエントリーより。

詳しくは以下

以下のようなコードで実装できるようです。

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

$(document).ready(function(){

	var thumb = $('img#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

jQueryを使用する事でこんなに短いコードで実装できるようになっているんですね。
CMS等を自作されている方、実装されてみてはいかがでしょうか。