jQuery Progress Bar for PHP AJAX File Upload

If you are looking for a simple Ajax image uploader script with progress bar then you will follow this tutorial. In this tutorial I’m going to display a progress bar during the AJAX file upload process using jQuery. I’m using jQuery form library and $(form).ajaxSubmit() functions to submit form data to the PHP page. After progressing image upload we show the preview to the target selector.

File Upload Form showing Progress Bar
In this form, I 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 option update 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; 
        }
    });
});

Note: please include latest jQuery libraray file.