Multiple Ajax Image Upload without Refreshing Page using Jquery

Today I am presenting the most important feature called multiple ajax image upload without refreshing the page using jquery and PHP.

Javascript Code

$("#photoimg").live('change',function(){})- photoimg is the ID name of INPUT FILE tag and $('#imageform').ajaxForm() - imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method. Uploaded images will <i>prepend</i> inside <i>#preview</i> tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js">
</script> <script type="text/javascript">
$(document).ready(function() {
    $('#photoimg').live('change', function() {
           var A=$("#imageloadstatus");
           var B=$("#imageloadbutton");
           $("#imageform").ajaxForm({target: '#preview', beforeSubmit:function()
               { A.show();
                 B.hide();
                }, success:function(){ A.hide(); B.show(); },
                   error:function(){ A.hide(); B.show(); } }).submit(); }); });
 </script>

Here hiding and showing #imageloadstatus and #imageloadbutton based on form upload submit status.

index.php
Contains simple PHP and HTML code. Here $session_id=1 means user id session value.

<?php
   include('db.php');
   session_start();
   $session_id='1'; // User login session value ?>

  <div id='preview'> </div>
 <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> Upload image:
 <div id='imageloadstatus' style='display:none'>
         <img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'> <input type="file" name="photoimg" id="photoimg" /> </div>
</form>

Sample database design for Users.

Users
Contains user details username, password, email, profile_image and profile_image_small etc.

CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

ajaximage.php
Contains PHP code. This script helps you to upload images into uploads folder. Image file name rename into timestamp+session_id.extention

<?php
include('db.php');
session_start();
$session_id='1'; // User session id
$path = "uploads/";

function getExtension($str)
{
$i = strrpos($str,".");
if (!$i)
{
return "";
}
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
$ext = getExtension($name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>

db.php
Database configuration file, just modify database credentials.

<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>