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

Con jQuery possiamo implementare un indicatore di avanzamento per l'upload dei file.

Dato il seguente form:

<form id="upload" action="" method="post" enctype="multipart/form-data">   
  <div>      
    <input type="file" name="file" id="file">      
    <input type="submit" value="Upload">      
    <progress id="upload-progress"></progress>   
  </div>
</form>

Possiamo implementare la seguente soluzione:

$( "#upload" ).on( "submit", function( e ) {
    e.preventDefault();
    var file = $( "#file" )[0].files[0];
    var formData = new FormData();

    formData.append( "file", file );

    $.ajax({
        xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener( "progress", function( evt ) {
            var percentComplete = evt.loaded / evt.total;
              $( "#upload-progress" ).val( percentComplete );
                            
              }, false);
            return xhr;
            },
            url: url,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function( response ) {
                      //...
            }          
    });

});