Plugin per caricamento file JavaScript ES5 / ES6 gratuito - Uppy
Uno degli input di forma più difficili da progettare è il upload di file. Ha uno stile HTML predefinito, ma non è la cosa più bella del mondo.
uppy porta i caricamenti di file a un livello completamente nuovo con a interfaccia personalizzata e a processo di caricamento dinamico in stile Ajax.
esso funziona con il codice ES5 / ES6, così puoi costruire le tue app Web con gli standard JavaScript più recenti. E, persino supporta i caricamenti di file dai siti di archiviazione cloud come Dropbox o Google Drive, quindi è a script di caricamento file sfaccettato per il web.
Uppy è completamente gratuito e open-source, con un repo su GitHub. Tuttavia, il modo più semplice per installare questo plugin è attraverso npm o Yarn, quindi puoi farlo eseguilo come un vero pacchetto.
Una volta che hai aggiunto i file al tuo sito web, semplicemente includere il file Uppy.js e il codice CSS. Quindi, scegli come target qualsiasi campo di input che desideri e Uppy si prende cura di tutto il resto.
Ha un'interfaccia unica sembra un grande piazzamento quadrato trascinare e rilasciare i file. Puoi anche seleziona elementi dal tuo disco rigido o anche caricare i file in remoto da URL esterni. Piuttosto pazzo!
È possibile trovare l'intero processo di installazione nella pagina della documentazione, ma questo richiede almeno una certa comprensione di ECMAScript 6. Questa libreria guarda al futuro dello scripting e non è la cosa più facile da usare con JavaScript puro vanilla.
Tuttavia, se sei seriamente interessato allo sviluppo del Web, vale comunque la pena di imparare ES6. Potete trovare tonnellate di risorse online per l'auto-insegnamento e puoi anche usare Uppy come prima cosa “vero” progetto per immergersi e iniziare l'apprendimento.
Guarda l'esempio di Dashboard su vedi Uppy in azione. Per questa pagina, il il caricamento è nascosto dietro un pulsante di attivazione, dove fai clic sul pulsante per visualizzare un campo di caricamento modale.
Da lì, è possibile selezionare se si desidera caricare un'immagine dal tuo computer, dal web o anche dalla tua webcam!
La pagina degli esempi offre molte informazioni da esaminare, tra cui a trascina e rilascia esempio, insieme a un pagina demo internazionalizzata.
Ma, per imparare davvero come funziona, ti consiglio di sfogliare i documenti e sfogliare il repository principale di GitHub. Puoi anche condividere i tuoi pensieri con i creatori su Twitter @transloadit.
