
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.
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>
$(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; } }); });
PHP file upload code is same as we have seen for single and multiple image upload using jQuery.