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

Question

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

Navigation

#1 by (1 votes)

4

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

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

I did not want to do a "static" animation, colon, I want it consistent with the actual progress of loading.

php http javascript jquery ajax

asked by anonymous 22.03.2017 / 10:34

1 answer

Convert binary format string to PDF Tracking and posting system (social network type)

score 1 · Answer 1

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

Amount loaded
Total amount to load

After you receive, you only have to calculate the percentage:

(quantidade_carregada * 100) / quantidade_total_a_ser_carregada

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

See this plugin: AjaxSubmit . This link has a fairly 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 it is the current percentage of the upload. But it works the same way as the account I gave you at the beginning of the post, the difference is that it already has already 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

}