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="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript" src="jquery.form.js"></script><script type="text/javascript">// < ![CDATA[
$(document).ready(function() 
{ 
$('#photoimg').live('change', function()	
{ 
$("#preview").html('');
$("#preview").html('');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
}); 
// ]]></script>

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
?>
 
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
 
<div id='preview'>
</div>

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.

  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 ?
    $(“#preview”).html(”);
    $(“#preview”).html(”);

    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 yoursite.com/demo/AjaxImage/uploads

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>