Upload dei file con AJAX

Su un nuovo progetto, sto usando molto AJAX e Javascript anche per inviare i form.

In un form, devo aggiornare i dati dell'utente:

• username
• password
• avatar

Quindi devo mandare due stringhe e un file.

Vediamo come fare; partiamo dal form:

<form>
    <p>      
        <label><b>Username</b></label>
        <input id="username" name="username" type="text" value="">
    </p>
    <p>      
        <label><b>Password</b></label>
        <input id="password" name="password" type="password">
    </p>
    <p>
        <label><b>Avatar</b></label>
        <input type="file" id="avatar" name="avatar" multiple>
    </p>
    <p>
        <button type="button" onclick="aggiorna();">Aggiorna</button>
    </p>
</form>

Questa la funzione richiamata dal button:

function aggiorna() {
    var username = $('#username').val();
    var password = $('#password').val();
    var avatar = $('#avatar').get(0).files[0];
    var formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);
    formData.append('avatar', avatar);

    $.ajax({
        url: "script.php",
        data: formData,
        enctype: 'multipart/form-data',
        type: 'POST',
        cache: false,
        contentType: false,
        processData: false
    }).done(function (data) {
        console.log(data);
    }).fail(function () {
        alert('Si è verificato un errore');
    }).always(function () {
    });
}

All'inizio prendiamo i valori del form, e li aggiungiamo all'oggetto FormData.

Poi eseguiamo la chiamata AJAX verso PHP, dove stamperemo i dati:

var_dump($_POST);
var_dump($_FILES);

La prima riga ci visualizza username e password.

La seconda ci mostra i dati relativi all'immagine, che poi dovete elaborare e caricare (potete vedere anche questo articolo).

Considerate che qua non ho fatto nessuna validazione, ricordatevi di farla.

Enjoy!