I have this ajax code below I would like to be able to hide the once the progress bar has reached 100 %;
Not sure where best to place it.
$('.progress').show();
Code:
var inputFile = $('input[name=file]');
var uploadURI = "<?php echo base_url('question/ask/upload_attachment');?>";
var progressBar = $('#progress-bar');
$('#button-upload input[name="file"]').on('change', function() {
var fileToUpload = inputFile[0].files[0];
if (fileToUpload != 'undefined') {
// provide the form data
// that would be sent to sever through ajax
var formData = new FormData();
formData.append("file", fileToUpload);
// now upload the file using $.ajax
$.ajax({
url: uploadURI,
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function() {
},
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percentComplete = Math.round( (event.loaded / event.total) * 100 );
// console.log(percentComplete);
$('.progress').show();
progressBar.css({width: percentComplete + "%"});
progressBar.text(percentComplete + '% completed');
};
}, false);
return xhr;
}
});
}
});
There's only one rule - please don't tell anyone to go and read the manual. Sometimes the manual just SUCKS!