Komentáře k článku

Upload obrázků pomocí HTML5

HTML5 přináší několik zajímavých API. Při použití v kombinaci s elementem <canvas> je možné vytvořit naprosto úžasný formulář k nahrávání obrázků. V tomto článku si ukážeme jak. Popsaná API fungují dobře pro Firefox 4 i pro prohlížeče postavené na Webkitu. Bohužel pro IE bude třeba použít klasický formulář.

Zpět na článek

25 komentářů k článku Upload obrázků pomocí HTML5:

  1. Jakub Vrána

    Regulární výraz

    Místo file.type.mat­ch(/image.*/) by asi bylo lepší použít /^image//.tes­t(file.type), jinak se náhodou může strefit něco úplně jiného.

  2. rooobertek

    Výber viacerých súborov

    aj pre operu <input type=“file“ multiple=“multiple“ max=“99″>
    Číslo je nepodstatné, nehrá žiadnu úlohu

  3. fos4

    Message

    Školy nemám :-) ale neměla by být událost „message“ zavěšená na window místo window.document ?

  4. chleba

    dupla

    Tenhle clanek uz tady jednou byl. Drag&Drop se stejnejma ukazkama spolecne jeste s ajaxovym prikladem pro upload. Suchy.

    1. Michal Wiglasz

      Re: dupla

      Nevybavuju si, že by se v něm psalo o zmenšení obrázku přes canvas (namísto na straně serveru) a zobrazení průběhu nahrávání.

    2. Martin Malý

      Re: dupla

      Máte na mysli pravděpodobně tento článek. Za těch deset měsíců se technologie poněkud posunula, v článku se řeší trochu jiná věc trochu jiným způsobem… Ano, téma a příklad jsou podobné, a co má být?

  5. enumag

    K čemu ten canvas?

    Ahoj, článek byl velmi zajímavý. Už jsem drag&drop upload dělal, ale bez canvasu. Bohužel mi z článku poněkud ušlo k čemu je ten canvas dobrý, když mohu obrázky poslat přes XHR rovnou. Je to čistě k tomu, kdybych chtěl před uploadem aplikovat nějaké vlastní filtry? Nějak si nedokážu představit, kdy je to žádoucí.

    1. Villlém

      Re: K čemu ten canvas?

      Canvas je tam hlavně k vůli tomu, aby jste mohl uživateli ukázat náhled obrázků, které vybral.

      1. Mordae

        Re: K čemu ten canvas?

        Verim, ze to vetsi servery potesi. Urychli se tak nahravani. Uzivatel predem uvidi, co vlastne uvidi. Nebude treba mit tolik kapacity na resizing obrazku…

                1. enumag

                  Re: K čemu ten canvas?

                  Je dobré když na serveru uchováš obrázek v původní velikosti ze kterého pak generuješ různě velké miniatury. Před uploadem to nemá smysl.

                  Pokud jde o obličeje tak by ti je buď musel uživatel nějak označit anebo javascript rozpoznat – ani jedno není nijak triviální.

                  Takže ano, uniká.

                  1. josefrichter

                    Re: K čemu ten canvas?

                    Bože tyhle chytráky, co mají hned jasno, že je to na pytel, fakt žeru. Představ si třeba blbej inzertní server, kam můžeš uploadnout fotky prodávanýho zboží. Velmi pravděpodobně tam budeš chtít omezit velikost fotek třeba na 300x300px. Nepřijde ti rozummnější udělat to hned na client side, než pokaždé tahat třeba deset 8MPx fotek a nedej bože je ukládat? Jo, můžeš uživateli napsat „nahrávejte fotky velikosti do 300×300, formát jpg, maximálně 50kB“ – ale to není zrovna „klientský přístup.“ Už?

                    1. enumag

                      Re: K čemu ten canvas?

                      Ne nepřijde. tedy alespoň ne do doby, kdy bude canvas podporovaný ve všech prohlížečích.

                      1. Michal Wiglasz

                        Re: K čemu ten canvas?

                        Tak to je jednoduché – kde to jde, zmenšíme obrázek u klienta (přes canvas), kde ne, tak holt se bude muset zapotit linka a server. I tak se to docela vyplatí.

                        Plus nevím, ve kterém aktuálním prohlížeči to nejde – pro IE existuje exCanvas.

  6. dasim

    Ukázky

    Díky za článek, tohle je spíš taková obecná připomínka. Uvažovali jste na Zdrojáku nad přidáním živých ukázek toho, co v podobných článcích vytváříte? Vždycky, když někde vidím návod na implementaci něčeho a spoustu zdrojových kódů, první co hledám je tlačítko „Demo“. V zahraničních magazínech je většinou k nalezení.

    Já si samozřejmě přečtu základní popis a výklady u kusů kódu, ale mnohem radši se do pročítání článku pustím až potom, co vidím co přesně mi z něj vypadne. Nemluvě o užitečnosti funkční ukázky pro další využití. Podobné ukázky mi chyběly i např. u některých dílů série o HTML5 (např. popis drag-n-drop).

    Jasně, že to není vždy zapotřebí a ani nutnost, pokud sem přijdu s tím, že „přesně tohle teď potřebuju, tak si to rovnou kopírováním zdrojáků naimplementuju!“, jen je to občas fajn. Díky.

    (Pokud v článcích někde ukázky odkázané jsou, tak se omlouvám, ale já je prostě nenašel.)

    1. antaresin

      Re: Ukázky

      Souhlasím s kolegou…taky bych podobnou „funkci“ velmi uvítal! Každopádně děkuji za podobné články.

    2. Martin Malý

      Re: Ukázky

      Obecná připomínka je dobrá a k věci, a máte pravdu, že by se ukázky hodily. U některých článků je máme – zrovna v tom o drag and drop je cca v půlce titulek „Ukázka“ a hned pod tím „Ukažme si jednoduché demo“. Dokonce i u článků o Node.js nebo jiných serverových technologiích připravujeme celé demonstrační virtuální servery. Z vlastní zkušenosti ale mohu říct, že vytvořit takové demo zabere leckdy víc času než napsat článek – a to je podstata problému třeba u takovýchto překladů. Nemohu po překladateli chtít, aby demo napsal, a já sám nemusím mít vždy čas něco připravit, jako se to stalo tentokrát.

      Ale souhlasím s vámi v tom, že by bylo vhodné mít u těchto článků hned někde po ruce „tlačítko DEMO“, a popřemýšlím, jak jej tam v rámci redakčního systému vhodně zapracovat. Díky za tip!

  7. manakmichal

    dnd a chrome

    potýkám se s problémem u Chrome 10.0.648.205, kde FileAPI na lokálním počítači nevrací nic, avšak ve FF 3.6 ano. Oficiální ukázka na mozilla.org funguje i v Chrome. Jejich kód jsem si tedy zkopíroval a stejně to vrací prázdné elementy, nějaký bug nebo omezující featura?

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=3420