Social Networks

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.

<script type="text/javascript" src="
ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript" src="jquery.form.js"></script><script type="text/javascript">// < ![CDATA[
$('#photoimg').live('change', function()	
target: '#preview'
// ]]></script>

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

< ?php
$session_id='1'; // User login session value
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
<div id='preview'>

Sample database design for Users.


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

CREATE TABLE `users` (
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),

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

< ?php
$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'];
list($txt, $ext) = explode(".", $name);
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 "";
echo "failed";
echo "Image file size max 1 MB"; 
echo "Invalid file format.."; 
echo "Please select image..!";

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

  1. Since Jquery 1.7, the event .live() is deprecated. Instead, use .on().
    In this instance:
    $(‘#photoimg’).live(‘change’, function(){
    will be
    $(“#photoimg”).on(“change”, function(){

  2. Sorry for tons of questions, but do u know or have any idea on how to keep the image staying like a profile photo or avatar (because displaying image is after sending post data, but if i want to go to a profile or refresh the page the image does’nt remain)
    Thks in advance!

  3. Little plus : If someone upload a file format with an uppercase extension like JPG, it does not work, so u can add strtolower() function to counteract that

  4. Very well-done tutorial, THKS !!
    I’m new on programming, i don’t understand one thing : what this little code do in your javascript code ?

    Thks in advance

    • To be honest, it doesn’t need to be called twice, but it’s just saying to remove the preview image twice.
      I.e. if there is already an image in preview and the user uploads a different image, it will clear the preview image with the newer one.
      Hope it helped!

    • Hey Leena, the saved image is there in uploads folder. So if you created demo in folder demo/AjaxImage the image path will be

Leave a Reply

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

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>