How to know how much of the content was downloaded in an Ajax request?

Question

I need to do that little animation, like on Youtube, of the progress bar that appears at the top.

How do I know how much content has been downloaded, to have a basis for the progress bar?

I didn’t want to make a two-point "static" animation, I want it consistent with actual loading progress.

Answer 1

You have to take the functions that return you the following information:

• Loaded amount
• Total quantity to be loaded

After you receive, just do the percentage calculation:

(quantidade_carregada * 100) / quantidade_total_a_ser_carregada

This will give you how many % (percent) has already been uploaded from the file.

See this plugin: Ajaxsubmit. This link has a simple upload progress bar:

$(document).ready(function() { 
var options = { 
    target:   '#output',   // target element(s) to be updated with server response 
    beforeSubmit:  beforeSubmit,  // pre-submit callback 
    success:       afterSuccess,  // post-submit callback 
    uploadProgress: OnProgress, //upload progress callback 
    resetForm: true        // reset the form after successful submit 
}; 

 $('#MyUploadForm').submit(function() { 
    $(this).ajaxSubmit(options);            
    return false; 
 }); 


});

In the code below you get the variable percentComplete where the current upload percentage is. But it works the same way as the account I gave you at the beginning of the post, the difference is that here it already has calculated for you in the variable percentComplete

function OnProgress(event, position, total, percentComplete)
{
    //Progress bar
    $('#progressbox').show();
    $('#progressbar').width(percentComplete + '%') //update progressbar percent complete
    $('#statustxt').html(percentComplete + '%'); //update status text

}