Jquery Preview Upload Image

I just got a micro site project, one of the feature is User have to upload a picture and before submitting it, there will be a preview for the picture first. So i browser around to get a glimpse how to do that, and here it is.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery_upload_container">
<img id="previewing" src="https://s.w.org/style/images/wp-header-logo.png">
</div>
<input id="selectfile" type="file" name="gallery_image" />

<script>
$(document).ready(function(e) {

$("#selectfile").change(function() {
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
alert("Only jpeg, jpg and png Images type allowed");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});

function imageIsLoaded(e) {
$("#selectfile").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');
};
});
</script>

Got the source from : http://www.formget.com/ajax-image-upload-php/

Leave a Reply

Your email address will not be published. Required fields are marked *