JavaScript: upload dei file con l'oggetto XMLHttpRequest

L'upload di file in JavaScript può essere effettuato tramite l'utilizzo di XMLHttpRequest (XHR), un oggetto che consente di inviare richieste HTTP da un client web a un server web. Per eseguire l'upload di un file, è necessario utilizzare il metodo send() di XHR, che consente di inviare il contenuto del file al server.

Per effettuare l'upload, il primo passo è creare un'istanza di XMLHttpRequest e impostare la callback onreadystatechange per gestire la risposta del server. Successivamente, si deve utilizzare il metodo open() di XHR per specificare il metodo di richiesta (ad esempio POST), l'URL del server e se la richiesta deve essere effettuata in modo asincrono.

Una volta aperta la connessione, si deve impostare l'header Content-Type su multipart/form-data, che indica che la richiesta contiene dati binari come ad esempio i file. Infine, si deve utilizzare il metodo send() di XHR, passando come parametro l'oggetto FormData, che contiene i dati del file.

In questo modo, il file viene inviato al server e il caricamento viene gestito dalla callback onreadystatechange. Se la risposta del server è positiva, il file è stato caricato correttamente e può essere utilizzato dal server.

Esempio:

'use strict';

// Selezioniamo l'input file dal documento HTML
const fileInput = document.getElementById("file-input");

// Creiamo un'istanza di XMLHttpRequest
const xhr = new XMLHttpRequest();

// Impostiamo la callback per gestire la risposta del server
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Il file è stato caricato correttamente
    console.log("File caricato con successo!");
  }
};

// Apriamo la connessione con il server
xhr.open("POST", "/upload-file", true);

// Impostiamo l'header "Content-Type" su "multipart/form-data"
xhr.setRequestHeader("Content-Type", "multipart/form-data");

// Creiamo un oggetto FormData e aggiungiamo il file selezionato
const formData = new FormData();
formData.append("file", fileInput.files[0]);

// Inviamo la richiesta al server con il metodo "send"
xhr.send(formData);

In conclusione, l'upload di file in JavaScript è un'operazione abbastanza semplice e può essere eseguita utilizzando XMLHttpRequest e l'oggetto FormData. Tuttavia, è importante prestare attenzione alle dimensioni dei file e alla gestione degli errori per garantire un'esperienza utente ottimale.