Image Upload without Page Refresh with PHP and jQuery with Demo

Posted on

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" />
<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">
<br clear="all" />

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

`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`)

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.
$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'>";
echo "Image Upload failed";
echo "Image file size maximum 1 MB";
echo "Invalid file format";
echo "Please select image";

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('<img src="loader.gif" alt="Uploading...."/>');
target: '#preview'

Demo[sociallocker] Download[/sociallocker]

10 thoughts on “Image Upload without Page Refresh with PHP and jQuery with Demo

  1. An updated version of this script would be great as the mysql extension is deprecated since php 5.5 and completely removed from php 7.
    So updating it to mysqli or pdo would be great.

    1. Its due to jQuery live method that deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead. I will update script with latest version very soon. Thanks!

Leave a Reply

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