is it possible to find the ETA of a html 5 file upload?

html, javascript, jquery

Solution

to find the ETA, you must change the code to this. the changes that are made here are we have 2 new variables, named startTime and now.

place var startTime as soon as the upload starts, and it should be the same syntax as var now.

this script will tell users the percentage complete, kilobytes/megabytes uploaded vs kb/mb in total, and now the ETA of the file upload.

xhr.upload.addEventListener("progress", function(e) {

    var pc = parseInt(100 - (e.loaded / e.total * 100));
    var pci = parseInt(e.loaded / e.total * 100);
    //get us our ETA
    //kilobytes or megabytes?
    var pcia = e.loaded / 1024;
    var pcia2 = e.total / 1024;
    if (pcia2 > 1024)
    {
    pcia = pcia / 1024
    pcia2 = pcia2 / 1024;
    var now = (new Date()).getTime(); 
    var elapsedtime = now - startTime;
    elapsedtime = elapsedtime / 1000;
    var eta = ((e.total / e.loaded) * elapsedtime) - elapsedtime;
    eta = Math.round(eta);
    progress.innerHTML = pci + "% (" + Math.ceil(pcia * 100)/100 + " MB of " + Math.ceil(pcia2 * 100)/100 + " MB)-(" + eta +" secs. remaining)";alert(pci); progress(pci, $('#progress'));
        }
        else
        {
        var now = (new Date()).getTime(); 
        var elapsedtime = now - startTime;
        elapsedtime = elapsedtime / 1000;
        var eta = ((e.total / e.loaded) * elapsedtime) - elapsedtime;
        progress.innerHTML = pci + "% (" + Math.ceil(pcia * 100)/100 + " KB of " + Math.ceil(pcia2 * 100)/100 + " KB)-(" + eta +" secs. remaining)"; progress(pci, $('#progress'));
                }
            }, false);

Problem

Original source