Image Upload without Page Refresh with PHP and jQuery with Demo

Are you looking for image upload and preview without refreshing page using jQuery and PHP? You're here at right place. Here is a very simple script used to upload image file without page refresh using PHP and jQuery.

index.php: This is the main file that contains simple PHP code to make database connection, initialize session and HTML code with file upload FORM. The file also include jQuery libraray, jQuery image upload file and CSS file.
Here in index.php, I have also called image_upload.php on form action that handle image upload functionality without page refresh when browse image file with the help of jQuery upload.js.
<div class="upload_container">
<br clear="all" />
<center>
<div style="width:350px" align="center">
<div id='preview'></div>
<form id="image_upload_form" method="post" enctype="multipart/form-data" action='image_upload.php' autocomplete="off">
<div class="browse_text">Browse Image File:</div>
<div class="file_input_container">
<div class="upload_button"><input type="file" name="photo" id="photo" class="file_input" /></div>
</div><br clear="all">
</form>
</div>
</center>
<br clear="all" />
</div>


This is a sample database design for Users. The table users will contain user details user, pass, email and profile_photo.

CREATE TABLE IF NOT EXISTS `users` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`user` varchar(255) DEFAULT NULL,
`pass` varchar(100) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`profile_photo` varchar(200) DEFAULT NULL,
PRIMARY KEY (`uid`),
UNIQUE KEY `username` (`user`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;


The file image_upload.php is a major PHP script that handles image upload functionality to the server and also update database table with uploaded image details.
<?php
$path = "uploads/";
$valid_file_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photo']['name'];
$size = $_FILES['photo']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_file_formats)) {
if($size<(1024*1024)) {
$image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photo']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
mysql_query("UPDATE users SET profile_photo='$image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$image_name."' class='preview'>";
}
else
echo "Image Upload failed";
}
else
echo "Image file size maximum 1 MB";
}
else
echo "Invalid file format";
}
else
echo "Please select image";
exit;
}
?>


The file upload.js contains code to submit form when image file uploaded to accomplish image upload functionality with image_upload.php. The file also displays image upload loader.
$(document).ready(function() {
$('#photo').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#image_upload_form").ajaxForm({
target: '#preview'
}).submit();
});
});


Demo[sociallocker] Download[/sociallocker]