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).