HTML5 - Carica file

Quando abbiamo moduli di raccolta dati in una pagina HTML5 Oltre a poter prendere dati con campi di tipo di input, possiamo anche caricare file, con questo possiamo velocizzare il caricamento di alcuni dati che sono impossibili da esprimere in testo o che possono essere testi molto lunghi, è consuetudine caricare l'immagine file o file pdf, poiché questi due formati sono molto popolari, tuttavia con Ajax possiamo caricare quasi ogni tipo di file.
Caricare files
a caricare file utilizzando Ajax, dobbiamo creare un campo di tipo file in un form e nella nostra routine Ajax usa un oggetto Dati modulo con cui raccoglieremo i dati per poter dare loro il formato necessario e caricare il nostro file sul server.
L'oggetto Dati modulo va usato con cautela in quanto potrebbero esserci ancora versioni di browser che non lo supportano completamente, tuttavia è una soluzione abbastanza solida.
Vediamo nel codice seguente come eseguire un caricamento di file di base:

 EsempioBanane:Mele:Ciliegie:File:Totale:0 articoliInviare il modulo 

Quando si incorpora l'input del tipo di file, l'oggetto Dati modulo fa automaticamente le disposizioni affinché il nostro file possa essere caricato sul server, nell'immagine seguente possiamo vedere come il browser lo interpreta:

In questo caso si trattava di un'immagine abbastanza chiara quindi il tempo di caricamento del file sul server non si nota, tuttavia se fosse un pdf da 30 MB il tempo sarebbe molto più lungo, poiché questo è trasparente per l'utente, potrebbe pensare che la pagina non è "fare nulla" o è stato "pensare" per evitare questo possiamo incorporare una barra di avanzamento con la quale l'avanzamento diventa visibile.
Per vedere l'andamento della salita useremo l'oggetto XMLHttpRequest per verificare lo stato della richiesta Ajax:

 EsempioBanane:Mele:Ciliegie:File:Progresso:Totale:0 articoliInviare il modulo 

Abbiamo definito un elemento progresso e con lui XMLHttpRequest oggetto Possiamo assegnare i valori mentre il caricamento procede, nel browser possiamo vederlo come segue:

INGRANDIRE

Possiamo usare Ajax Per molto di più che consultare elementi su altre pagine, possiamo anche usarlo per migliorare i nostri moduli quando si tratta di acquisire dati.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo