jQuery Progress Bar for PHP AJAX File Upload

by Vincy. Last modified on September 10th, 2020.

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 DemoDownload

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

PHP file upload code is same as we have seen for single and multiple image upload using jQuery.

View DemoDownload

Popular Articles

↑ Back to Top