How can I upload pictures with ajax/jQuery and PHP without refreshing the page?

I am trying to allow users to upload pictures and display them on the same page. For instance Facebook allows users to choose a file and upload it when signing up without having to reload the page. How ca I do this?

Are you looking for the answer for above asked questions, then you are at the right place.

9lession had implemented this ajax form submitting using jquery.form plugin and used cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.
We provided download script link and live demo for Ajax Image Upload without Refreshing Page using Jquery below –

Download Ajax Image Upload without Refreshing Page Source

 Download Ajax Image Upload without Refreshing Page Demo

 

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.

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
?>

Upload image

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/";

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $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 "";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB"; 
}
else
echo "Invalid file format.."; 
}
else
echo "Please select image..!";
exit;
}
?>

Please post your comment here !
Original soirce Ajax Image Upload without Refreshing Page using Jquery.