1964-1985 Affinità-divergenze fra il compagno ASYNC e noi del conseguimento della Progress Bar
form.html
<!DOCTYPE html> <html> <head> <title>progressbar</title> </head> <body> <form action="upload.php" method="POST"> <label>File</label> <input type="file" name="file"> <input type="submit" onclick="return uploadFile(this.form);"> </form> <progress min="0" max="100" value="0">0% complete</progress> <script src="js/script.js"></script> </body> </html>
script.js
var uploadFile = function(form){
var xhr = new XMLHttpRequest();
var formData = new FormData(form);
var progressBar = document.querySelector('progress');
xhr.upload.addEventListener("progress", function(e){
if(e.lengthComputable) {
progressBar.value = ( e.loaded / e.total ) * 100;
progressBar.textContent = progressBar.value + '% complete';
}
}, false);
xhr.open(form.method, form.action, true);
xhr.send(formData);
return false;
}
async
An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send()method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. (ma anche eventi non completati AKA progress AKA taaaac) This must be true if the multipart attribute is true, or an exception will be thrown.