Upload e download asincrono

Ultimamente mi sono trovato a che fare con download e upload di file. La cosa che ho sempre odiato è il dover ricaricare la pagina per inviare un file o aprirne una nuova per scaricare un file.
Così ho cercato un po’ in giro…
La prima cosa che si potrebbe pensare è usare AJAX, che per noi programmatori fa rima con asincrono. A quanto sembra però, XmlHttpRequest non supporta i dati binari: niente da fare. Altre soluzioni sono basate su bridge Flash o totalmente su Flash, ma coi tempi che corrono è un buco nell’acqua (e comunque, non mi è mai piaciuto Flash).
La soluzione arriva dal passato: ricorrere ai cari vecchi iframe.
Anch’io ho storto il naso, ma cosa c’è di male a usare un bell’iframe nascosto? Contando il beneficio che si ha nell’usabilità, mettere un frame non è una tragedia. Contando che il 99% dei siti ne fa comunque uso più o meno volontariamente (anche solo i widget di Facebook sono basati sugli iframe), metterlo anche nel proprio non è uno sgarro dagli standard troppo imperdonabile.
Dissuasi i sensi di colpa, vediamo come fare.
Entrambe le soluzioni sono molto semplici: si tratta di caricare la pagina di download/upload nell’iframe nascosto invece che in bella vista all’utente.

Download
Questa è sicuramente la più semplice: potete trovarne un esempio sul sito Dowsplay
Agendo sull’attributo src dell’iframe carichiamo il file da scaricare nell’iframe, apparirà quindi la finestra di dialogo per salvare, e questa sarà l’unica cosa che l’utente vedrà.

Upload
Per l’upload dobbiamo gestire il submit del form che contiene il campo file.
Ecco un esempio minimale:


<!-- impostando l'attributo target con l'id dell'iframe dirigiamo il caricamento della nuova pagina nel frame invece che sotituirla a quella visualizzata
ricordiamoci enctype="multipart/form-data" per la codifica del file -->
<form method="POST" action="upload.php" target="upload_frame" enctype="multipart/form-data">
	<input type="file" class="fileinput"/>
	<input type="submit"/>
</form>
<!-- nascondiamo l'iframe con display: none; -->
<iframe id="upload_frame" style="display: none;"></iframe>

Quando l’utente invia il form non vedrà niente: starà a noi dare un qualche feedback giusto per fargli capire che è andato tutto a buon fine (o magari no!)

  • http://www.mhtservizi.it Angelo Campagnari

    ciao,
    i comandi cosi inseriti non vanno……….

    cosi si:
    \
    \
    \
    \

    c’ erano due problemi:
    1 se non metti i name negli input non vengono trasmessi….
    2 il target deve puntare ad un name e non un id……