画面移遷なしで画像アップロード＆サムネイル表示
画像をアップロードするフォームで、
アップロードする画像を選択→画面移遷なしでアップロード→サムネイルを動的表示
というようにしたいのですが、うまくいきません。
以下のjQueryプラグインが希望の動作に近そうなのですが、詳しい設置方法がわかりません。
http://www.ideaxidea.com/archives/2010/03/ajax_upload.html
とりあえず、サンプルにならって、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>
