Pereiti prie turinio

HTML5 file upload pamoka


Rekomenduojami pranešimai

Labas vakaras, savaitgalį skyriau valandą ir sulipdžiau "scriptą", kuris padės visiems tiems, kurie nori gražaus file upload meniu, kuris vyktų neperkrovus puslapio ir jį mėgtų paieškos sistemos. Kaip žinia dauguma tokių pluginų veikia iframe pagalba, kas nepatinka SE.

 

Mano parašyta sistema naudoja jquery Uploaifive pluginą, kuris leidžia uploadinti failus naudojantis HTML5 technologija. Niekada nesidomėjau kaip veikia tas pluginas (HTML5), bet mano galva tai pasirinkus failą jis yra išskaidomas ir jo informacija siunčiama į controllerį apdorojimui. Kitaip tariant persiunčiamas pats failas. Jis naudingas tuo, kad kaip ir minėjau nesipjauna su paieškos sistemomis.

 

Šiaip nebūčiau to daręs, bet jau 12 kartų žmonėms esu daręs šį aparatą, kadangi viską turiu susidėjęs ir integruoti trunka tik kelias minutes, tai nusprendžiau pasidalinti su kitais, bus paslauga Jums.

 

Šiaip viską ir taip galima parsisiųsti iš uploadify.com, bet ten trūksta informacijos kaip teisingai stilizuoti mygtuką ir t.t. todėl tai padariau aš. Pavyzdinis variantas naudoja CodeIgniter karkasą. Jį pasirinkau dėl to, kad niekada labai daug nesidomėjau apsaugomis keliant failą, bijojau, kad kai duosiu pavyzdį man į serverį neprikeltų jokių virusų, nefloodintų nuotoliniu būdu ir panašiai. Karkasas turi apsaugą tam, dėl to esu ramus šioje vietoje. Taip pat sistema naudoja tokius jquery pluginus, kaip "jquery Cookie, jquery lightbox_me ir žinoma patį jquery pack. Pasirinkau 1.6, mažiausiai pjaunasi su lightbox_me ir šiaip, po ranka kito net neturėjau :)

 

Tiems, kurie nesupranta kaip veikia šis karkasas ir norės pluginą naudoti kažkur kitur:

 

application/controllers/main_controller

šiame faile yra metodas "photos_upload", tai jį galit naudoti kaip atskirą failą arba kaip funkciją (metodą) (kaip aš).

 

application/views/main_view

šablonas, visas "vaizdas".

 

assets/

visi aplanke esantys itemai yra reikalingi.

 

Pavyzdys: http://ponasbynas.lt

Atsisiuntimas: photo_upload.rar

 

P.s.: aš naudoju dar ir biblioteką nuotraukų dydžių keitimui, ją rasit čia:

 

application/libraries/simpleimage.php

 

P.P.S.: nepamirškit susichmodinti direktorijų, kur talpinsit nuotraukas. Ilgai nelaikysiu projekto, iki tol kol pradės blogi dėdės nesąmones daryti arba iki tol reikės panaudoti domeną. Tiems kas darys blogus darbus turiu blogų žinių, susirenku IP adresus kuomet daroma daugiau negu reikia, turėsit ant sąžinės jeigu ką nors padarysit. :P

 

Projektas aprašytas anglų kalba (pratinuosi visgi) ir nesmerkit dėl klaidų, į github dar nededu visgi. Ačiū už dėmesį

 

tarp kitko iš šio plugino neišspaustos visos galimybės, yra daugybė funkcijų, kurias dar galima naudoti:

 

http://www.uploadify.com/documentation/

Nuoroda į pranešimą
Dalintis kituose puslapiuose

taip, mokamas, bet niekas nedraudžia duoti scripto, kuris naudoja šitą pluginą nekomerciniais tikslais. Galiausiai mokamas dėl to, kad gautum supportą. Na bet taip, jeigu kas nors paskūs, kad čia dalinu nemokamai tai irgi nebus gerai... Cmon, nejaugi neatsiras tokių? juk tik email parašyti reik ;)

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Na jeigu nekreipsim į licenzijas, tai už UploadFive tikrai yra ne ką blogesnių variantų. Tad, kad neapsistotumėm ties vienu HTML5 uploaderiu:

 

http://www.freshdesignweb.com/jquery-html5-file-upload.html

 

Kitas variantas. Žinoma aš ne SEO/SMO specialistas, bet koks skirtumas ar uploaderis patinka paeiškos sistemai ar ne. Juk scripto darbas uploadinti failus, o ne kažkokį Black Hat SEO išvedinėt?

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Na jeigu nekreipsim į licenzijas, tai už UploadFive tikrai yra ne ką blogesnių variantų. Tad, kad neapsistotumėm ties vienu HTML5 uploaderiu:

 

http://www.freshdesignweb.com/jquery-html5-file-upload.html

 

Kitas variantas. Žinoma aš ne SEO/SMO specialistas, bet koks skirtumas ar uploaderis patinka paeiškos sistemai ar ne. Juk scripto darbas uploadinti failus, o ne kažkokį Black Hat SEO išvedinėt?

Toks ir skirtumas, kad daug kas naudoja vadinamuosius "ajax" uploaderius, kurie veikia su iframe. O paieškos sistemoms nepatinka IFRAME (minusas vidinei puslapio optimizacijai). Jie galbūt net nežino to, o html5 kaip žinia patinka, tai nesunku nuspręsti kurį reikia naudoti

 

ir taip, jų yra daug. Bet ne visi turi išsamią dokumentaciją. Taip pat man šitas pasirodė pats paprasčiausias

Redagavo gio
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijungsiu prie klausimo dėl SEO :) Failų upload'as neturėtų turėt kažkokios įtakos SEO. Google'o botas tikrai neis ir nepildys tavo formos, neprikabinės failo ir jo nesubmitins. Tas upload'as neneša jokios prasmės neužpildžius formos, todėl neturi ir jokios įtakos SEO. Galbūt, tu esi kažkur paskaitęs, kad iframe'ai yra blogai, arba kad AJAX yra blogai dėl SEO - tai taip, tas tiesa (jeigu neprotingai padaryti, ir dėl labai lengvai suprantamų priežasčių), bet kas liečia file uploadą tai nelabai matau ryšio tarp jo ir SEO. Pataisykite mane, jeigu aš klystu.

 

Kas liečia failų uploadą per AJAX. Buvo naudojami iframe'ai todėl, kad XMLHttpRequest, kuris buvo taip plačiai naudojamas iki 2012 metų (tuo tarpu ir AJAX'as, ir daug kur kitur), nepalaiko multipart duomenų, todėl per jį negalima perduoti failų, todėl failų upload'as per ajax'ą tiesiog nebuvo įmanomas, todėl buvo naudojami iframe'ai. Nuo 2012-ųjų pradėjo populiarėti XMLHttpRequest2, kuris jau palaiko failų perdavimą, todėl dabar jau galima naudoti ir jį, TAČIAU. Tikriausiai tuose pluginuose bus visokie fallback'ai, kad jeigu nėra palaikomas šitas dalykas, tai pasinaudoti tradiciniu būdu arba prikabinti flash'ą. Bet nuo to labai padidėja lib'o dydis. Pvz tas uploadify 60Kb sveria. Labai daug, vos ne kiek visas jQuery. Nenaudočiau šito plugin'o :)

Redagavo vitalikaz
Nuoroda į pranešimą
Dalintis kituose puslapiuose

bet kokiu atveju, nesvarbu koks tas uploadas, bet jeigu jis turės iframe (dėl to, kad pats sakei, nebuvo galima siųsti multipart duomenų per ajax ir daugelis dar dabar naudoja tai) google botas jį matys. Juk mes matom jį taip pat paspaudę ctrl+u? Tame ir buvo esmė, kad iframe yra iframe ir SEO jo nemėgsta.

 

Taip pat, kas liečia svorį - minimize versija sveria vos 12kb :)

Redagavo gio
Nuoroda į pranešimą
Dalintis kituose puslapiuose

bet kokiu atveju, nesvarbu koks tas uploadas, bet jeigu jis turės iframe (dėl to, kad pats sakei, nebuvo galima siųsti multipart duomenų per ajax ir daugelis dar dabar naudoja tai) google botas jį matys. Juk mes matom jį taip pat paspaudę ctrl+u? Tame ir buvo esmė, kad iframe yra iframe ir SEO jo nemėgsta.

 

Taip pat, kas liečia svorį - minimize versija sveria vos 12kb :)

 

Ne, paspaudęs Ctrl+U to iframe'o nematysi. Jis on-fly pridedamas per javascript'ą, kai jau reikia uploadinti failą, į tą dinamiškai sukurtą iframe'ą užkraunamas turinys ir tada paimamas kaip response'as, o iframe'as ištrinamas. Tas tikrai neturės jokios įtakos SEO :)

 

Dėl size'o - hm. Aš parsisiunčiau, tai matau flash'ą 13kb (čia jis dėl fallback'o?) ir pats lib'as minifikuotas 47kb.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Ne, paspaudęs Ctrl+U to iframe'o nematysi. Jis on-fly pridedamas per javascript'ą, kai jau reikia uploadinti failą, į tą dinamiškai sukurtą iframe'ą užkraunamas turinys ir tada paimamas kaip response'as, o iframe'as ištrinamas. Tas tikrai neturės jokios įtakos SEO :)

 

Dėl size'o - hm. Aš parsisiunčiau, tai matau flash'ą 13kb (čia jis dėl fallback'o?) ir pats lib'as minifikuotas 47kb.

tai jeigu iframe kraunamas su dom tai jis ir bus matyti. Tu jau kalbi apie mandresnes technologijas :)

 

Dėl size - naudojamas tik vienas scriptas: jquery.uploadifive.min.js ir jis sveria 12 ar 14kb berods. Jokių flash nereik, jeigu ruošiesi duoti naudoti useriams, kurių naršyklės nepalaiko HTML5 tai išvis nedaryt tada. Nes pas mane tik vienas failas ir nėra nei flash, nei frame, viskas veikia per vieną ir visą lib sudaro vienas failas :)

 

o ką parsisiuntei? nes šiaip jis mokamas ir dokumentacijoj parašyta, kad veikia su vienu failu (min)

Redagavo gio
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Nu pamoka tai čia nelabai :) Kodo gabalai ir „nesidomėjau kaip veikia“. Bet pats uploadify toks atrodo OK, jei reikia palaikyti senoviškas naršykles.

 

Pats HTML5 turi XMLHttpRequest 2 ir FormData, kurie pagaliau leidžia per AJAX lengvai išsiųsti formą netgi su multipart failais. Na, aišku, IE palaikymas vargingas :)

 

https://developer.mozilla.org/en-US/docs/Web/API/FormData

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Karštos temos

×
×
  • Sukurti naują...