Bezmaksas ES5 / ES6 JavaScript failu augšupielādes spraudnis - Uppy

Viens no sarežģītākajiem veidiem, ko izmanto dizaina izstrādē, ir failu augšupielāde. Tam ir noklusējuma HTML stils, bet tā nav pasaulē skaistākā lieta.

Uppy aizņem failu augšupielādes pilnīgi jaunā līmenī ar a pielāgots interfeiss un a dinamiskais Ajax stila iekraušanas process.

Tā darbojas ar ES5 / ES6 kodu, lai jūs varētu izveidot savas tīmekļa lietotnes ar jaunākajiem JavaScript standartiem. Un tas pat atbalsta failu augšupielādes no mākoņu krātuves vietnēm piemēram, Dropbox vai Google disks, tāpēc tas ir a daudzpusīgs failu augšupielādes skripts tīmeklim.

Uppy ir pilnīgi bez maksas un atvērtā koda, ar repo GitHub. Tomēr vienkāršākais veids, kā instalēt šo spraudni, ir caur npm vai dziju, lai jūs varētu palaist to kā īstu paketi.

Tiklīdz jūs saņemsiet failus, kas pievienoti jūsu vietnei, jūs vienkārši ietveriet Uppy.js failu un CSS kodu. Tad jūs vērsieties pie jebkura vēlamā ievades lauka un Uppy rūpējas par pārējo.

Tam ir unikāls interfeiss izskatās kā viens liels kvadrātveida izvietojums vilkt un nomest failus. Jūs varat arī atlasiet vienumus no cietā diska vai pat augšupielādēt failus no ārējiem URL. Diezgan traks!

Visu iestatīšanas procesu var atrast dokumentācijas lapā, bet tā prasa vismaz zināmu izpratni par ECMAScript 6. Šī bibliotēka skatās uz skriptu nākotni un nav vienkāršākā lieta ar tīru vaniļas JavaScript.

Bet, ja jūs nopietni domājat par tīmekļa izstrādi, tas ir vērts mācīties ES6. Tu vari atrast tonnas resursu tiešsaistē pašmācībai un jūs pat varat izmantot Uppy kā savu pirmo “reāls” projekts, lai ienirtos un sāktu mācīties.

Pārbaudiet informācijas paneļa piemēru skatiet Uppy darbībā. Šai lapai augšupielāde ir paslēpta aiz sprūda pogas, kur jūs noklikšķiniet uz pogas, lai parādītu modāla augšupielādes lauku.

No turienes jūs varat izvēlēties, vai vēlaties augšupielādēt attēlu no datora, no interneta vai pat no jūsu tīmekļa kameras!

Lapas Piemēri piedāvā ķekaru, lai apskatītu, tostarp a velciet un nometiet piemēru, kopā ar starptautiska demo lapa.

Bet, lai tiešām iemācītos, kā tas darbojas, es iesaku noliegt dokumentus un pārlūkot galveno GitHub repo. Jūs varat arī dalīties savās domās ar Twitter @transloadit veidotājiem.