javascript – How to get the current percentage value of an upload?

Question:

I'm working with PHP , but I imagine this can be done with just javascript/jQuery . When I upload, the browser shows the percentage in the status bar. I would like to take that value and create a custom progress bar from it.

The bar I know how to do. I just don't know how to get the current percentage value. How to get it?

Answer:

In HTML5 you can do this by adding a progress listener to the upload property of an XMLHttpRequest (used to upload the file via Ajax):

xhr.upload.addEventListener("progress", function(e) {
    var pc = parseInt(100 - (e.loaded / e.total * 100));
    // Atualizar sua barra de progresso usando "pc"
}, false);

Source (and full example) in English: How to Create Graphical File Upload Progress Bars in HTML5 and JavaScript . This functionality, it seems, is supported by all popular browsers , in their most current version only (ie, it doesn't work in older but still widely used versions, such as IE9 or earlier).

Scroll to Top