Imageupload Preview
Jeg har fundet en guide på et imageupload hvor imaget bliver previewet når man har browser det. I følge den her guide:http://css-tricks.com/ajax-image-uploading/
jeg gør følgende:
1. Indsætter de to scripts i min header:
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>
2. Henter den nyeste version fra Jquery.com og ajaxuploaderen som er vist nederst i guiden. Alt den her: og sætter det i mappen "js"
og laver en class af loading. Som vist nede i jqueryen. Den her
>> loading img { display: none; }
_________________________________________________________________
$(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);
}
});
});
_________________________________________________________________
Så langt så godt. Nu har jeg det jquery jeg skal bruge i følge guiden. og linket det op i min header.
4. Nu skal jeg bare smide denne del af htmlen ind:
<div id="upload-area">
<div id="preview">
<img width="100px" height="100px" src="/images/icons/128px/zurb.png" id="thumb">
</div>
<form action="/playground/ajax_upload" id="newHotnessForm">
<label>Upload a Picture of Yourself</label>
<input type="file" size="20" id="imageUpload" class=" ">
<button class="button" type="submit">Save</button>
</form>
</div>
Jeg har gjort alt det fra guiden men jeg kan ikke få det til at virke.
Den eneste fejl jeg kan se er at i form tagget:
<form action="/playground/ajax_upload" id="newHotnessForm">
Kan være fordi jeg mangler en ajax uploader??