Come eseguire upload asincroni di file con JavaScript? Scopriamo come permettere l’upload di file sul nostro servizio web in modo asincrono.
Spesso e volentieri ci troviamo a dover integrare il servizio di upload di file sulla piattaforma web a cui stiamo lavorando.
Non sappiamo quale metodo scegliere, quali librerie usare e come agire.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
In diversi articoli del blog elogio una delle librerie più complete ed utili per migliorare la produttività nello sviluppo web: sto parlando di jQuery e se non ti scatta niente di fronte a questo nome, ti invito a dare un occhio a questo articolo!
Ciò detto, cerchiamo di capire come eseguire upload asincroni di file tramite il framework jQuery.
Perchè usare jQuery
Prima ancora di vedere come fare davvero ad eseguire questi benedetti upload, parliamo un attimo delle potenzialità aggiuntive che ci mette a disposizione jQuery!
- Validazione dei file: ebbene sì, tramite jQuery prima ancora di eseguire l’upload, puoi verificare il nome, la dimensione e il MIME type!
- Gestione del progresso: diciamocelo, aggiungere una barra o un indicatore di percentuale che mostra a che stato è l’upload è veramente una figata! 😀
Chiarito questo, veniamo al punto.
HTML
Abbiamo bisogno di un form. Un form che abbia un input di tipo file. Ma visto che siamo fighi e vogliamo fare le cose fatte per bene, aggiungiamo anche un elemento che ci permetta di monitorare il progresso di upload asincrono.
Perciò:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="UPLOAD" />
</form>
<progress></progress>
Il form serve a gestire l’operazione stessa di upload non appena l’utente cliccherà sul bottone!
Il tag “progress” serve a monitorare il progresso.
JavaScript (o meglio, jQuery)
A questo punto dobbiamo gestire due cose principali, vediamole in modo lineare e con quanto meno tecnichese possibile.
Gestione del file
Questa parte serve per controllare l’evento di caricamento del file. Per intenderci, non appena l’utente trascina o seleziona il file con cui fare l’upload, questa funzione viene lanciata:
$(':file').on('change', function () {
//Questa variabile contiene il file vero e proprio
var file = this.files[0];
//Controlli sul file come dicevo prima
//Ad esempio qui, controlliamo che il file non sia più grande di 1k
if (file.size > 1024) {
alert('Il massimo consentito per il file è 1k');
}
//Eventuali controlli aggiuntivi
});
Quindi, con questa funzione possiamo effettuare controlli sul file selezionato dall’utente prima ancora che questo venga effettivamente caricato!
Esecuzione dell’upload
E qua, veniamo al bello, per intenderci quando l’utente cliccherà il bottone di upload.
A tutti gli effetti, eseguiamo la procedura che permette l’upload asincrono e non solo.
Possiamo monitorare lo stato di progresso in tempo reale!
Ecco come:
$(':button').on('click', function () {
//Invocazione asincrona per eseguire l'upload
$.ajax({
//endpoint della pagina atta a caricare il file, lato backend
url: 'upload.php',
type: 'POST',
//Prendiamo i dati dal form: in altre parole il file :D
data: new FormData($('form')[0]),
//Queste righe servono a specificare a jQuery che non si deve preoccupare
//Del tipo di file, PERCHÈ l'abbiamo fatto prima!
//devi inserirle altrimenti darà errore!
cache: false,
contentType: false,
processData: false,
// Esecuzione della XMLHTTP REquest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
//Qui, agiamo a tutti gli effetti sul tag "PROGRESS" in modo tale da aggiornare l'utente finale sul progresso di upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
Quindi, ecco tutto quello che serve per eseguire upload asincroni di file con JavaScript: Semplice, efficace e immediato! 😀
