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ář.
Jestli jste někdy řešili nasazování aplikace, asi víte, že všechno odladit může být celkem zdlouhavá záležitost. Dokážete si představit, že na to máte jen týden? Že je to nemožné? Není! Jde to a ani to nemusí být příliš složité.
Reportáž z virtuální konference FOSDEM. Minule jsem popsali Go room, dnes se věnujeme monitoringu a observability.
Mikrofrontendy jsou zajímavá adaptace konceptu microservices pro potřeby frontendového vývoje. Podívejte se, co to v praxi obnáší a proč jsme se v Seznam.cz rozhodli vyvinout náš vlastní microfrontend framework, Merkur.
Regulární výraz
Místo
file.type.match(/image.*/)by asi bylo lepší použít/^image//.test(file.type), jinak se náhodou může strefit něco úplně jiného.Výber viacerých súborov
aj pre operu <input type=“file“ multiple=“multiple“ max=“99″>
Číslo je nepodstatné, nehrá žiadnu úlohu
Message
Školy nemám :-) ale neměla by být událost „message“ zavěšená na window místo window.document ?
dupla
Tenhle clanek uz tady jednou byl. Drag&Drop se stejnejma ukazkama spolecne jeste s ajaxovym prikladem pro upload. Suchy.
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í.
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?
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í.
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.
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…
Re: K čemu ten canvas?
K tomu ale ziadny Canvas netreba. Staci normalne ten URLblob natrepat do src=““.
Re: K čemu ten canvas?
Přesně tak. Což mě vrací k původní otázce: K čemu ten canvas?
Re: K čemu ten canvas?
Editace před nahráním na server?
Re: K čemu ten canvas?
Nějaký rozumný (reálný) případ, kdy se to hodí?
Re: K čemu ten canvas?
Resize? Vyrez obliceje kontaktu z fotky? Nebo mi neco unika?
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á.
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ž?
Re: K čemu ten canvas?
Ne nepřijde. tedy alespoň ne do doby, kdy bude canvas podporovaný ve všech prohlížečích.
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.
Re: K čemu ten canvas?
Tedy spíše canvas a drag&drop upload.
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.)
Re: Ukázky
Souhlasím s kolegou…taky bych podobnou „funkci“ velmi uvítal! Každopádně děkuji za podobné články.
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!
Re: Ukázky
Naprosty souhlas! Proc root.cz nema neco jako „Google Code Playground“ ?
"Periodická tabulka"
http://joshduck.com/periodic-table.html
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?