Come usare le API HTML5 per l'upload dei file con jQuery

Sfruttare le API HTML5 per l'upload di file con AJAX è semplice con jQuery.

La soluzione è la seguente:

"use strict";

$( "#upload-form" ).on( "submit", function( e ) {
    e.preventDefault();
    
    var $form = $( this );
    var $file = $form.find( "#file" );
    var file = $file[0].files[0];

    var formData = new FormData();
    formData.append( "file", file );

    $.ajax({
      url: "/ajax/upload",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function( response ) {
        //...
      }
    });
    
});

Lato server occorre ricordare che l'attributo name di un form tradizionale viene qui sostituito dal primo parametro del metodo .append() dell'oggetto FormData. In questo caso sarà quindi file.