jQuery Progress Bar for PHP AJAX File Upload

Last modified on February 24th, 2017 by Vincy.

In this tutorial, we are going display a progress bar during the AJAX file upload process using jQuery. We are using jQuery form library and functions$(form).ajaxSubmit() update to submit form data to the PHP page. After progressing image upload we show the preview to the target selector.

View Demo Download

File Upload Form showing Progress Bar

In this form, we have file input field and progress bar to show the file upload progress. Initially, the progress bar width is set to 0 which will be gradually increased based on the progress completed.

<form id="uploadForm" action="upload.php" method="post">
    <div>
        <label>Upload Image File:</label>
        <input name="userImage" id="userImage" type="file" class="demoInputBox" />
    </div>
    <div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
    <div id="progress-div"><div id="progress-bar"></div></div>
    <div id="targetLayer"></div>
</form>
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>

jQuery Form Submit

$(form).ajaxSubmit() contains set of options to track the progress of the AJAX call. jQuery uploadProgress updates the progress bar status with the currently completed uploading progress. The script is,

$(document).ready(function() { 
    $('#uploadForm').submit(function(e) {	
        if($('#userImage').val()) {
            e.preventDefault();
            $('#loader-icon').show();
            $(this).ajaxSubmit({ 
                target:   '#targetLayer', 
                beforeSubmit: function() {
                    $("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){	
                    $("#progress-bar").width(percentComplete + '%');
                    $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
                },
                success:function (){
                    $('#loader-icon').hide();
                },
                resetForm: true 
            }); 
            return false; 
        }
    });
});

jquery_file_upload_progress