• Ajax Image Upload without Refreshing Page using Jquery

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    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('<img src="loader.gif" alt="Uploading...."/>');
    $("#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
    ?-->
    Upload image
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    
    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 "<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;
    }
    ?&gt;
    Tags:

Comments on this post

Leave a Reply

  • Security Code :


    four + 3 =