jQuery: creare un indicatore di avanzamento per l'upload dei file con Bootstrap

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
        }
    });
});