File upload progress bar with jQuery

Question

I am trying to implement an AJAX file upload feature in my project. I am using jQuery for this; my code submits the data using AJAX. I also want to implement a file upload progress bar. How can I do this? Is there any way to calculate how much has already been uploaded so that I can calculate the percentage uploaded and create a progress bar?

Answer 1

I've done this with jQuery only:

$.ajax({   xhr: function() {     var xhr = new window.XMLHttpRequest();      xhr.upload.addEventListener("progress", function(evt) {       if (evt.lengthComputable) {         var percentComplete = evt.loaded / evt.total;         percentComplete = parseInt(percentComplete * 100);         console.log(percentComplete);          if (percentComplete === 100) {          }        }     }, false);      return xhr;   },   url: posturlfile,   type: "POST",   data: JSON.stringify(fileuploaddata),   contentType: "application/json",   dataType: "json",   success: function(result) {     console.log(result);   } });