I have a problem with the upload of a form using javascript and monitoring it's progress.
The problem is that the XMLHttpRequest progress event is raised with a strange behavior. It reaches too fast 100% when the real upload is not finished, sometimes it's just started, monitored with chrome dev tools and system monitor.
So while the calculated progress is 100% i have too wait long time for send the file with the page apparently stucked. I've read that antivirus can be the reason of that but this is not the case. I don't have antivirus and I turned off firewall too. I tried with both chrome, firefox in windows and ubuntu and libraries such as jquery form plugin with the same behavior.
Someone has an explanation of this strange behavior. What is the XMLHttpRequest progress event loaded attribute actually counting?
Thank you in advance. I fell like banging on the wall for a day.
Here a small piece of code for reproduce the issue:
<?php
echo "Hello!";
if(isset($_FILES['file'])){
echo " File received";
return;
}
?>
<form method='post' action='' enctype='multipart/form-data'>
<input type='file' name='file' />
<input type='submit'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function ()
{
console.log("READY STATE CHANGED");
console.log(ajax);
};
ajax.upload.addEventListener("progress", function (event) {
var percent = (event.loaded / event.total) * 100;
console.log(percent);
});
ajax.open("POST", $(this).attr('action'), true);
ajax.send(new FormData(this));
return false;
});
});
</script>
