Multiple File Upload Progress Bar Script using PHP, HTML5, jQuery and AJAX Plugins

Multiple File Upload Progress Bar Script using PHP, HTML5, jQuery and AJAX Plugins

Multiple File Upload With Progress Bar functionality is very common in online websites. Creating a multiple file upload progress bar script is very easy by using PHP, AJAX and jQuery. I will use AJAX Library from Github to create a script for multiple file upload and progress bar. This tutorial on multiple file upload will demonstrate step by step scripting for multiple file upload using PHP, jQuery and AJAX Plugin.

First, we will create a multiple file upload button using HTML and then we will put some CSS on this multiple file upload button to design it and make it more interactive. After creating multiple file upload button, we will add PHP script which will upload the multiple files and show the progress bar. Last but not the least, we will add AJAX Plugin for multiple file upload from Github in our working folder and then use that multiple file upload plugin in our javascript code. I have also done some error handling in my javascript code like a user can only multiple upload PNG, GIF and JPG files. You can impose extra checks as per your requirement. I am also showing the progress bar while multiple files are being uploaded.

Step 1: Create Upload Button using HTML

<div id="upload" >Upload File</div> 
<span id="status" ></span> 
<ul id="files"></ul> 

Step 2: Design Upload Button using CSS

#upload
{ 
    margin:30px 200px; padding:15px; 
    font-weight:bold; font-size:1.3em; 
    font-family:Arial, Helvetica, sans-serif; 
    text-align:center; 
    background:#f2f2f2; 
    color:#3366cc; 
    border:1px solid #ccc; 
    width:150px; 
    cursor:pointer !important; 
    -moz-border-radius:5px; -webkit-border-radius:5px; 
}

Step 3: Add PHP Multiple File Upload Script

Below is the PHP script for multiple file upload. This PHP script will show 'Success' message when all the files are uploaded successfully. If there is any error while uploading multiple files, the PHP script will report an error.

<?php 
$uploaddir = './uploads/';  
$file = $uploaddir . basename($_FILES['uploadfile']['name']);  
  
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file))
{  
  echo "success";  
}
else
{ 
    echo "error"; 
} 
?> 

Step 4: Add jQuery and Javascript to your code

First of all, you have to include jQuery Multiple File Uploader Plugin from GitHub. Here is the link: https://github.com/valums/file-uploader

$(function(){ 
    var btnUpload=$('#upload'); 
    var status=$('#status'); 
    new AjaxUpload(btnUpload, { 
        action: 'upload-file.php', 
        //Name of the file input box 
        name: 'uploadfile', 
        onSubmit: function(file, ext){ 
            if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){  
                  // check for valid file extension  
                status.text('Only JPG, PNG or GIF files are allowed'); 
                return false; 
            } 
            status.text('Uploading...'); 
        }, 
        onComplete: function(file, response){ 
            //On completion clear the status 
            status.text(''); 
            //Add uploaded file to list 
            if(response==="success"){ 
                $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success'); 
            } else{ 
                $('<li></li>').appendTo('#files').text(file).addClass('error'); 
            } 
        } 
    }); 
}); 

Multiple File Upload Progress Bar Script Explanation:

To use the AJAX Upload library we need to initialize the AjaxUpload object and provide it with parameters. The first parameter is the id of the button element on which the user will click and second is the server side script that’ll handle file upload. The second parameter can accept an array of various options to give you more control over the process.

And that’s exactly what I have done:

1. The action field is the path to server side script,

2. name is the name of file input box(hidden) which will be used for upload. If you change this value, make sure to change the server side script corresspondinly.

3. onSubmit lets you perform some function before the file is uploaded e.g. you can check the file extension like i’ve done above or show a status message.

4. onComplete lets you perform some action after the upload is complete e.g. I’ve shown the uploaded image to the user.

And if you want to limit the number of files that a user can upload at a time, simply use this.disable() within onSubmit or onComplete to disable the upload button after checking for some condition.

 

Note: The file upload using AJAX is not true ajax as it uses hidden iframe to upload the form data but his whole process is transparent by using the AJAX Upload library and gives a feel of AJAXified file upload.