Image Upload without Page Refresh with PHP and jQuery with Demo

Are you looking for image upload functionality with preview and also without refreshing page using jQuery and PHP? Yes, you’re here at the right place. Here is a very simple code used to upload image file without page refresh using PHP and jQuery.

Also, read:

• Upload Multiple Images using jQuery, PHP & MySQL
• Reduce or Compress Image Size While Uploading in PHP
• Amazon S3 File Upload using PHP
• Angular Multiple File Upload with PHP and MySQL
• Create Thumbnails While Uploading Images with PHP & jQuery
• Amazon S3 File Upload using JavaScript

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();
});
});

You may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

Demo Download