9 Snippet di campo di caricamento file open source personalizzati

Puoi trovare strumenti straordinari per migliorare i moduli Web, che vanno dai kit dell'interfaccia utente ai plug-in jQuery avanzati.

Ma uno dei campi di input più difficili da modificare è il campo di caricamento. Questo è un elemento di input HTML predefinito e consente agli utenti di caricare file dal proprio computer. Il restyling del campo di caricamento è una sfida enorme rispetto ad altri elementi del modulo.

Se speri di personalizzare i tuoi input di caricamento, questa galleria ti aiuterà. Ho raccolto 9 campi di caricamento fatti a mano da CodePen che dimostrano che puoi modificare lo stile del campo in modo che appaia come desideri.

1. Caricamento file piatto

Lo sviluppatore Wallace Erick ha creato questo campo di caricamento piatto con solo un po' di CSS e JavaScript. Prende in prestito la tendenza del design piatto, che evita i gradienti concentrandosi su singoli colori, spesso con una combinazione di colori monocromatica.

Puoi aggiungere questo design di caricamento file su qualsiasi pagina e farlo sembrare fantastico. Tutto quello che devi fare è cambiare la combinazione di colori e posizionarla correttamente all'interno del tuo modulo.

Funziona proprio come ti aspetteresti e funziona sull'elemento di input HTML standard. Quindi questo è utilizzabile anche con i browser più vecchi e dovrebbe funzionare anche su dispositivi mobili.

2. Caricamento file personalizzato

Ecco un design che diventa un po' più astratto con il campo di caricamento. Lo sviluppatore Aaron Vanston ha creato questo caricamento di file come una replica di quelli che vediamo sui siti Web più grandi.

Pensa ai grandi siti tecnologici come Dropbox, Google+ e Facebook. Spesso hanno un'area di trascinamento della selezione con un grande spazio "clicca qui" per avviare la finestra di caricamento. Questo è esattamente ciò che Aaron ha fatto con questo frammento.

Si basa su jQuery e una buona quantità di JS/CSS per funzionare. E mentre utilizza il campo di input HTML standard, gestisce anche il processo di caricamento con funzioni JS personalizzate.

Se conosci JavaScript, questo può funzionare come un modello utile per creare la tua interfaccia utente per il caricamento dei file.

3. Caricatore animato reattivo

Se fai qualsiasi tipo di web design moderno, allora sai che devi diventare reattivo. Gli utenti mobili possono caricare file sul Web tramite questi stessi moduli, quindi utilizzare un campo di input reattivo è un'ottima idea.

Dai un'occhiata a questo design per un esempio di un campo di caricamento ottimizzato per dispositivi mobili di qualità. È molto semplice, con solo un piccolo spazio di caricamento quadrato con supporto drag & drop.

Tieni presente che questo non utilizza l'elemento di input, quindi non c'è modo di fare clic per il caricamento. Penso che sia un incubo di usabilità, ma questo è anche solo un frammento di esempio utilizzato per i test, quindi non è orientato verso una perfetta usabilità.

Se porti questo snippet nel tuo sito, ti consigliamo di aggiungere un tipico campo di caricamento accanto all'area di trascinamento della selezione.

4. Caricatore personalizzato

I progetti di sviluppo giornalieri sono un ottimo modo per affinare le tue abilità. Drew Vosburg ha seguito questo approccio per creare un dolce modulo di caricamento ospitato gratuitamente su CodePen.

È fortemente personalizzato con le funzioni JavaScript che gestiscono l'effetto di trascinamento della selezione. Ma questo campo di input è in realtà creato per supportare sia il tocco che il clic, oltre al trascinamento della selezione.

L'area selezionabile è un'etichetta HTML in stile CSS. Quell'elemento dell'etichetta è allegato al campo di input, che è nascosto dalla pagina. Funziona proprio come un campo cliccabile. Sicuramente un'idea intelligente ed è completamente semantica per l'avvio.

5. Interfaccia di caricamento delle foto d'archivio

Ecco uno dei frammenti più complessi, ma impressionanti che ho visto su CodePen. Ti consente di caricare le foto in una galleria direttamente dal tuo computer. Con ogni foto che carichi, ti mostrerà un'anteprima direttamente sulla pagina.

Funziona estraendo le immagini tramite JavaScript, quindi convertendole in base64 per incorporarle in CSS.

Ogni volta che carichi immagini su un server, genereranno un file temporaneo. Sul tuo server, puoi utilizzare questo file temporaneo per visualizzare l'immagine. Ma ora che CSS supporta base64, questa è un'altra alternativa.

L'interfaccia è super pulita e la funzione di caricamento si integra perfettamente.

6. Interfaccia utente di caricamento blu semplice

Se stai cercando un campo di caricamento senza JS, dai un'occhiata a questo esempio, creato da Stephen Baker.

Usa puro CSS3 per cambiare lo stile di input in un grande pulsante. Funziona con l'icona di caricamento Font Awesome e avvolge semplicemente un'intera area circolare attorno al campo di caricamento.

Puoi cambiare lo stile, il colore, l'icona o qualsiasi altra cosa per farla corrispondere al tuo sito. È fondamentalmente un'alternativa super pulita allo stile di input predefinito e funziona su CSS3 puro.

7. Input di caricamento file personalizzato jQuery

Lo sviluppatore Terry Young ha preso un po' di jQuery e l'ha usato per migliorare alcuni campi di caricamento esistenti. Questo è il risultato (ed è un bel risultato, se posso dirlo).

Attraverso questi stili puoi modificare il testo del campo di caricamento, la dimensione, il colore del pulsante o rimuovere il campo di testo per utilizzare un solo pulsante.

Nota che ciò richiede una buona quantità di jQuery perché la maggior parte di queste funzionalità non può essere modificata con CSS. Se non ti dispiace lavorare con jQuery, queste opzioni sono fenomenali.

8. File di input dell'interfaccia utente piatta

Ecco un campo di caricamento piatto leggermente diverso creato da Geoffrey Crofte. Anche questo si basa su alcuni JavaScript, ma stilizza l'intero input con le proprietà CSS3.

Poiché questo è uno snippet di esempio, non puoi effettivamente caricare file da nessuna parte. Ma è abbastanza facile cambiare se lo sposti nel tuo sito. Il design e la configurazione di base sono davvero ciò che dà vita a questo frammento.

La funzione di ritorno viene eseguita in JavaScript, quindi è qui che gestiresti i caricamenti di file, le modifiche sullo schermo o qualsiasi altra cosa.

Soprattutto, questi codici funzionano nei browser risalenti a IE 8! Quindi è un'opzione piuttosto solida se sei preoccupato per l'accessibilità.

9. Campi di caricamento multiplo

Ecco un ultimo campo personalizzato con una svolta: sembra piuttosto semplice esteticamente, ma il vero vantaggio è nella funzionalità.

Questo campo di caricamento è stato progettato per supportare più file contemporaneamente. In genere non lo vedi con i campi di input, o almeno non per impostazione predefinita. Gli utenti devono selezionare più file nella stessa finestra e il back-end deve supportarlo.

Con questo frammento di codice, puoi elencare tutti i nomi di file in un campo di caricamento. Potresti anche usare JavaScript per aggiungere quei nomi di file altrove nella pagina in bella vista.