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">
<input id="selectfile" type="file" name="gallery_image" />

$(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;
var reader = new FileReader();
reader.onload = imageIsLoaded;

function imageIsLoaded(e) {
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');

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 *