9 Fragmente de câmp personalizate pentru încărcarea fișierelor open source

Puteți găsi instrumente uimitoare pentru îmbunătățirea formularelor web, de la kituri UI până la pluginuri jQuery avansate.

Dar unul dintre câmpurile de introducere cele mai dificile de editat este câmpul de încărcare. Acesta este un element de intrare HTML implicit și le permite utilizatorilor să încarce fișiere de pe computerul lor. Restylingul câmpului de încărcare este o provocare masivă în comparație cu alte elemente de formular.

Dacă sperați să personalizați intrările de încărcare, această galerie vă va ajuta. Am adunat 9 câmpuri de încărcare realizate manual de la CodePen care dovedesc că puteți remodifica câmpul pentru a arăta așa cum doriți.

1. Încărcare fișier plat

Dezvoltatorul Wallace Erick a creat acest câmp de încărcare plat cu doar un pic de CSS și JavaScript. Se împrumută pe tendința designului plat, care evită degradeurile concentrându-se pe culori individuale - adesea cu o schemă de culori monocromatică.

Puteți adăuga acest design de încărcare a fișierului pe orice pagină și să arate grozav. Tot ce va trebui să faceți este să schimbați schema de culori și să o poziționați corect în formularul dvs.

Funcționează exact așa cum v-ați aștepta și rulează pe elementul standard de intrare HTML. Deci, acesta este utilizabil și cu browsere mai vechi și ar trebui să funcționeze și pe mobil.

2. Încărcare fișier personalizat

Iată un design care devine puțin mai abstract cu câmpul de încărcare. Dezvoltatorul Aaron Vanston a creat acest fișier încărcat ca o replică a celor pe care le vedem pe site-uri web mai mari.

Gândiți-vă la marile site-uri tehnologice precum Dropbox, Google+ și Facebook. Ei au adesea o zonă de glisare și plasare cu un spațiu mare de „clic aici” pentru a lansa fereastra de încărcare. Exact asta a făcut Aaron cu acest fragment.

Se bazează pe jQuery și pe o cantitate bună de JS/CSS pentru a funcționa. Și, deși folosește câmpul standard de introducere HTML, se ocupă și de procesul de încărcare cu funcții JS personalizate.

Dacă știți cum să folosiți JavaScript, acesta poate funcționa ca un șablon la îndemână pentru a vă construi propria interfață de utilizare pentru încărcarea fișierelor.

3. Încărcător animat receptiv

Dacă faci orice fel de design web modern, atunci știi că trebuie să fii receptiv. Utilizatorii de telefonie mobilă pot încărca fișiere pe web prin aceleași formulare, așa că utilizarea unui câmp de intrare receptiv este o idee grozavă.

Aruncați o privire la acest design pentru un exemplu de câmp de încărcare de calitate pentru dispozitive mobile. Este foarte simplu, cu doar un mic spațiu de încărcare pătrat cu suport drag & drop.

Doar rețineți că acest lucru nu folosește elementul de intrare - deci nu există nicio modalitate de a face clic pentru încărcare. Cred că acesta este un coșmar de utilizare, dar acesta este, de asemenea, doar un fragment de probă folosit pentru testare – deci nu este orientat spre o utilizare perfectă.

Dacă aduceți acest fragment pe site-ul dvs., este recomandat să adăugați un câmp tipic de încărcare lângă zona de glisare și plasare.

4. Încărcare personalizat

Proiectele zilnice de dezvoltare sunt o modalitate excelentă de a vă perfecționa abilitățile. Drew Vosburg a urmat această abordare pentru a construi un formular de încărcare dulce găzduit gratuit pe CodePen.

Este puternic personalizat cu funcții JavaScript care gestionează efectul de glisare și plasare. Dar acest câmp de introducere este de fapt creat pentru a accepta atât atingerea, cât și clicul, împreună cu glisarea și plasarea.

Zona pe care se poate face clic este o etichetă HTML cu stil CSS. Acest element de etichetă este atașat câmpului de introducere, care este ascuns în afara paginii. Funcționează la fel ca un câmp pe care se poate face clic. Cu siguranță o idee inteligentă și este complet semantică.

5. Fotografie de stoc Încărcare interfață

Iată unul dintre cele mai complexe, dar impresionante fragmente pe care le-am văzut pe CodePen. Vă permite să încărcați fotografii într-o galerie direct de pe computer. Cu fiecare fotografie pe care o încărcați, vă va afișa o previzualizare chiar pe pagină.

Funcționează prin extragerea de imagini prin JavaScript, apoi conversia lor în base64 pentru a le încorpora în CSS.

Ori de câte ori încărcați imagini pe un server, acestea vor genera un fișier temporar. Pe propriul dvs. server, puteți utiliza acest fișier temporar pentru a afișa imaginea. Dar acum că CSS acceptă base64, aceasta este o altă alternativă.

Interfața este super-curată și funcția de încărcare se integrează direct.

6. Interfață simplă de încărcare albastră

Dacă sunteți în căutarea unui câmp de încărcare fără JS, aruncați o privire la acest exemplu, creat de Stephen Baker.

Utilizează CSS3 pur pentru a schimba stilul de intrare într-un singur buton mare. Funcționează cu pictograma de încărcare Font Awesome și pur și simplu înfășoară o zonă circulară întreagă în jurul câmpului de încărcare.

Puteți schimba stilul, culoarea, pictograma sau orice altceva pentru a se potrivi cu site-ul dvs. Practic, este o alternativă super-curată la stilul de intrare implicit și rulează pe CSS3 pur.

7. Intrare de încărcare a fișierului personalizat jQuery

Dezvoltatorul Terry Young a folosit un pic de jQuery și l-a folosit pentru a îmbunătăți unele câmpuri de încărcare existente. Acesta este rezultatul (și este un rezultat al naibii, dacă pot spune așa).

Prin aceste stiluri puteți modifica textul câmpului de încărcare, dimensiunea, culoarea butonului sau puteți elimina câmpul de text pentru a utiliza doar un singur buton.

Rețineți că acest lucru necesită o cantitate bună de jQuery, deoarece majoritatea acestor caracteristici nu pot fi modificate cu CSS. Dacă nu te deranjează să lucrezi cu jQuery, aceste opțiuni sunt fenomenale.

8. Fișier de intrare plat UI

Iată un câmp de încărcare plat ușor diferit creat de Geoffrey Crofte. Acesta se bazează și pe ceva JavaScript, dar stilează întreaga intrare cu proprietăți CSS3.

Deoarece acesta este un fragment de exemplu, nu puteți încărca fișiere nicăieri. Dar, este destul de ușor de schimbat dacă mutați acest lucru pe propriul site. Designul și configurarea de bază sunt cu adevărat ceea ce dă viață acestui fragment.

Funcția de returnare rulează în JavaScript, așa că acolo te-ai ocupa de încărcarea fișierelor, modificările de pe ecran sau orice altceva.

Cel mai bine, aceste coduri funcționează în browsere care datează de la IE 8! Deci, este o opțiune destul de solidă dacă ești îngrijorat de accesibilitate.

9. Câmpuri de încărcare multiplă

Iată un ultim câmp personalizat cu o întorsătură: pare destul de simplu din punct de vedere estetic – dar adevăratul premiu este în funcționalitate.

Acest câmp de încărcare a fost conceput pentru a accepta mai multe fișiere simultan. De obicei, nu vedeți acest lucru cu câmpurile de introducere - sau cel puțin nu în mod implicit. Utilizatorii trebuie să selecteze mai multe fișiere în aceeași fereastră, iar backend-ul trebuie să accepte acest lucru.

Cu acest fragment, puteți lista toate numele fișierelor într-un singur câmp de încărcare. Puteți chiar să utilizați JavaScript pentru a atașa acele nume de fișiere în altă parte a paginii în mod clar.