jQuery: mostrare le dimensioni di un file scelto per l'upload

In jQuery possiamo mostrare le dimensioni di un file scelto per l'upload.

Partiamo dal seguente form di upload:

<form action="/upload" method="post" id="upload" enctype="multipart/form-data">
    <div>
        <input type="file" name="file" id="file"/>
        <span id="file-info"></span>
    </div>
</form>

In jQuery useremo le API dei file per mostrare la dimensione del file scelto:

(function( $ ) {
  $.fileSize = function( bytes, output ) {
      var sOutput;
      if( output ) {
          for (var aMultiples = [ "Kb", "Mb", "Gb", "Tb", "Pb", "Eb", "Zb", "Yb" ], nMultiple = 0, nApprox = bytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
              sOutput = nApprox.toFixed(4) + " " + aMultiples[nMultiple];
          }
      } else {
          sOutput = bytes / 1024;
      }
      return sOutput;
  };

  $(function() {
      $( "#file" ).on( "change", function() {
          var file = $( this )[0];
          var uploadedFile = file.files[0];

          $( "#file-info" ).text( $.fileSize( uploadedFile.size, true ) );
      });
  });
})( jQuery );