JQuery - upload and show preview image (based on ZURB)
I'm newbie in scripting and try to follow Zurb articles on Image Uploads with 100% Less Suck. Guaranteed. But still can not make it right. On requirement said that I need JQuery and AjaxUpload plugin. So I do make links to files needed:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zurb.com/javascripts/plugins/ajaxupload.js"></script>
(Sorry Zurb and others that I use the links, I use the file for educational purpose only. I don't mean anything bad)
This is the script that I follow from Zurb
JQUERY
$(document).ready(function(){
var thumb = $('img#thumb');
new AjaxUpload('imageUpload', {
action: $开发者_如何学Python('form#testForm').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);
}
});
});
CSS
span.wrap { padding: 10px; }
span.wrap.new { margin-left: 30px; }
span.wrap button { display: block; margin-top: 10px; }
span.wrap label { margin-bottom: 5px; }
div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }
div.preview.loading { background: url(http://www.woningcorporatie-processen.nl/static/modules/sensus/images/loading.gif) no-repeat 39px 40px; }
div.preview.loading img {display: none; }
input#imageUpload { width: 400px; }
span.wrap form { margin: 0; }
HTML
<div class="wrap">
<div class="preview">
<img id="thumb" width="100px" height="100px" src="https://greenhouse.lotus.com/plugins/plugincatalog.nsf/blankLogo.gif" />
</div>
<span class="wrap new">
<form id="testForm" action="ajax_upload">
<label>Upload a Picture of Yourself</label>
<input type="file" id="imageUpload" size="20" />
<button type="submit" class="button">Save</button>
</form>
</span>
</div>
Already try in JsFiddle but not working good. Can you guys help what I supposed to do so I can preview the uploaded image with this Jquery?
Thanks a lot!
精彩评论