PHP/jQuery Multiple Files Upload With The ProgressBar And Validation
By using the jQuery we can upload the multiple files to the server and display the ProgressBar into the page.
For that we have to use the jQuery plugin jQuery Form which help us to upload the files to the server and display the ProgressBar.
You can download the jQuery Form plugin from the following URL.
So first we have to create the simple HTML form which allow us to select the file and upload to the server.
In the HTML page we have to also attach the jQuery file and the jQuery Form plugin.
HTML:
<form method="post" enctype="multipart/form-data" name="formUploadFile" id="uploadForm" action="upload.php"> <div class="form-group"> <label for="exampleInputFile">Select files to upload:</label> <input type="file" id="exampleInputFile" name="files[]" multiple="multiple"> <p class="help-block"><span class="label label-info">Note:</span> Please, Select the only images (.jpg, .jpeg, .png, .gif) to upload with the size of 100KB only.</p> </div> <button type="submit" class="btn btn-primary" name="btnSubmit" >Start Upload</button> </form>
In the above HTML code I assigned the ID(id=”uploadForm”) to the HTML form tag.
Now We have to setup the jQuery code to upload the files to the server.
JavaScript:
$(document).ready(function(){ var divProgressBar=$("#divProgressBar"); var status=$("#status"); $("#uploadForm").ajaxForm({ dataType:"json", beforeSend:function(){ divProgressBar.css({}); divProgressBar.width(0); }, uploadProgress:function(event, position, total, percentComplete){ var pVel=percentComplete+"%"; divProgressBar.width(pVel); }, complete:function(data){ status.html(data.responseText); } }); });
In JavaScript, I used the jQuery Form plugin which provides the ajaxForm() function which allow us the submit the whole form to the server including the files and other form data.
In ajaxForm() we have to pass the HTML form ID. So Whenever user click the submit button, ajaxForm() function will be send form data to the server.
Syntax:
$("#HTML-FROM-ID").ajaxForm({});
Example:
$("#uploadForm").ajaxForm({});
So whenever user select the files to upload and click on the Upload button the file will be upload to the server and display the progress/status of the file uploading into the ProgressBar.
Click here to download full source code
jQuery Form Plugin
jQuery Form Plugin provides the ajaxForm() function which allow us to submit the file to the server and display the progress/status in the ProgressBar.
In the ajaxForm() function we just have to pass the HTML Form’s ID attribute, So whenever user click on the submit button then the ajaxForm() function will submit the content of the HTML Form to the server.
ajaxForm() function will use the URL of the HTML Form tag’s action attribute value.
ajaxForm() function provides the 3 main function which help us to display the progress as we want to display.
beforeSend() function: beforeSend() function will be called when ajaxForm() is going to submit the files to the server.
uploadProgress() function: uploadProgress() function will be called when ajaxForm() is uploading the file to the server.
uploadProgress() function has the 4 arguments: event, position, total, percentComplete.
total argument value indicates the how much total number of bytes will be upload to the server.
percentComplete argument value indicates the how much number of bytes will be uploaded to the server.
complete function: complete function will be called when all the files is uploaded to the server.