All geek questions in one place

XMLHttpRequest upload.onprogress download instantly completed

I am trying to make a file loader using HTML5 with a progress bar. Here is my code:

<!DOCTYPE html> <html> <head> <title>Test Progress Meter</title> <script type="text/javascript"> function submitFile(){ var blobOrFile = document.getElementById("fileInput").files[0]; var xhr = new XMLHttpRequest(); xhr.onload = function(e) { alert("finished!"); }; xhr.upload.onprogress = function(e) { if (e.lengthComputable) { document.getElementById("statusBox").innerHTML = e.loaded + " / " + e.total; } }; xhr.open('POST', 'test.php', true); xhr.send(blobOrFile); }; </script> </head> <body> <input type="file" id="fileInput" onchange="submitFile();" /> Status: <span id="statusBox"></span> </body> </html>

Basically, in all my browsers, when I select a file to download, the progress event is triggered and immediately shows the entire transfer as completed. Then it sits there while the file actually loads and, depending on the file, after a few seconds / minutes, warns the script and shows the correct answer from the server.

Am I missing something obvious? As far as I can see, this happens in all my browsers (IE10, Chrome 28, FF22).

+4
source share
3 answers

this is my code and it works great for me:

 xhr.upload.onprogress = function(e){ var done = e.position || e.loaded, total = e.totalSize || e.total var present = Math.floor(done/total*100) document.getElementById('status').innerHTML = present + '%' }
+1
source

I had the same problem as yours, then I tried my page from another computer, everything went fine, I used Chrome throttling to simulate a slow Internet connection, but it seems that there is still something different from the real one the situation

0
source

Because the server or gateway caches the request data immediately, write the file data to disk or memory. At the moment, the data transfer rate is actually 100%. But the server logic code has not yet completed processing the file data, which is simply cached on the server.

0
source

Source: https://habr.com/ru/post/1497756/

More articles:


All Articles