Con jQuery possiamo implementare un indicatore di avanzamento per l'upload dei file.
La soluzione fa uso del widget CSS di Bootstrap ed è la seguente:
var $form = $( "#upload-form" );
$form.on( "submit", function( e ) {
e.preventDefault();
var file = $form.find( "#file" )[0].files[0];
var formData = new FormData();
formData.append( "file", file );
$( ".progress", $form ).show();
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener( "progress", function ( evt ) {
if ( evt.lengthComputable ) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt( percentComplete * 100 );
$( ".progress-bar", $form ).text( percentComplete + "%" );
$( ".progress-bar", $form ).css( "width", percentComplete + "%" );
}
}, false);
return xhr;
},
success: function( response ) {
$( ".progress", $form ).hide();
// Elaborazione della risposta
}
});
});