画面移遷なしで画像アップロード＆サムネイル表示

画像をアップロードするフォームで、
アップロードする画像を選択→画面移遷なしでアップロード→サムネイルを動的表示
というようにしたいのですが、うまくいきません。
以下のjQueryプラグインが希望の動作に近そうなのですが、詳しい設置方法がわかりません。

http://www.ideaxidea.com/archives/2010/03/ajax_u …

とりあえず、サンプルにならって、jQueryとajaxupload.jsを読み込んで、以下のように設置してみましたがサムネイルが表示されません。
アドバイスをいただけると助かります。

ヘッダーに↓
<script type="text/javascript">
$(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);
}
});
});
</script>

bodyに↓
<h2>New Hotness</h2>
<div class="column-row">
<div class="seven columns">
<div class="preview">
<img id="thumb" width="100px" height="100px" src="/img/hoge.png" />
</div>
<span class="wrap hotness">
<form id="newHotnessForm" action="/post.php">
<label>Upload a Picture of Yourself</label>
<input type="file" id="imageUpload" size="20" />
<button type="submit" class="button">Save</button>
</form>
</span>
</div>
</div>

No.1 ベストアンサー 回答者： yyr446 回答日時： 2011/03/10 09:36

フォームのactionに指定したサーバー側のプログラムが、生成したサブネールのURLを返すような仕組みが別途必要ですが、ちゃんと準備してありますか？

こいつ↓とくみあわせれば、楽しいかも..
http://img.simpleapi.net/

この回答へのお礼

お礼が大変遅くなり申し訳ありません。
てっきり上記の内容だけでできると思い込んでおりました。
お恥ずかしい限りですが、アドバイスのおかげでなんとか実現することができました。
どうもありがとうございました。

お礼日時：2011/03/17 22:17