• Ajax Select and Upload Multiple Images with Jquery

    Upload multiple images with single browse.

    Database design :-
    User Uploads

    Contains user upload details upload_id, image_name, user_id_fk(foreign key) and timestamps etc.

    View Code MYSQL
    1
    2
    3
    4
    5
    6
    7
    
     
    CREATE TABLE  `user_uploads` (
    `upload_id` int(11) AUTO_INCREMENT PRIMARY KEY,
    `image_name` text,
    `user_id_fk` int(11),
    `created` int(11)
    )

    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 prepend inside #preview tag.

    View Code JAVASCRIPT
    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
    
    <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.

    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
    
    <?php
    include('db.php');
    session_start();
    $session_id='1'; // User login session value
    ?>
    <style>
     
    body
    {
    font-family:arial;
    }
     
    #preview
    {
    color:#cc0000;
    font-size:12px
    }
    .imgList
    {
    max-height:150px;
    margin-left:5px;
    border:1px solid #dedede;
    padding:4px;   
    float:left;   
    }
    </style>
    <div id='preview'>
    </div>
    <form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
    Upload image: 
    <div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
    <div id='imageloadbutton'>
    <input type="file" name="photos[]" id="photoimg" multiple="true" />
    </div>
    </form>

    ajaxImageUpload.php :-
    Contains PHP code. This script helps you to upload images into uploads folder and it will rename image file into timestamp+session_id.extention format to avoid duplicates. This system will store image files into user_uploads with user session id tables

    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    
    <?php
    error_reporting(0);
    session_start();
    include('db.php');
    $session_id='1'; //$session id
    define ("MAX_SIZE","2000"); // 2MB MAX file size
    function getExtension($str)
    {
    $i = strrpos($str,".");
    if (!$i) { return ""; }
    $l = strlen($str) - $i;
    $ext = substr($str,$i+1,$l);
    return $ext;
    }
    // Valid image formats 
    $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {
    $uploaddir = "uploads/"; //Image upload directory
    foreach ($_FILES['photos']['name'] as $name => $value)
    {
    $filename = stripslashes($_FILES['photos']['name'][$name]);
    $size=filesize($_FILES['photos']['tmp_name'][$name]);
    //Convert extension into a lower case format
    $ext = getExtension($filename);
    $ext = strtolower($ext);
    //File extension check
    if(in_array($ext,$valid_formats))
    {
    //File size check
    if ($size < (MAX_SIZE*1024))
    {
    $image_name=time().$filename;
    echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
    $newname=$uploaddir.$image_name;
    //Moving file to uploads folder
    if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname))
    {
    $time=time();
    //Insert upload image files names into user_uploads table
    mysql_query("INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");
    }
    else
    {
    echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>'; }
    }
     
    else
    {
    echo '<span class="imgList">You have exceeded the size limit!</span>';
    }
     
    }
     
    else
    {
    echo '<span class="imgList">Unknown extension!</span>';
    }
     
    } //foreach end
     
    }
    ?>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <?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");
    ?>

Comments on this post

Leave a Reply

  • Security Code :


    eight + = 9