jQuery: upload AJAX con le API HTML5

Short link

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.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.