pátek 11. prosince 2009

Firefox 3.6 zlepší práci se soubory ve formulářích

Ve Firefoxu 3.6 se dočkáme dvou novinek týkajících se práce se soubory. Tou první je podpora uploadu více souborů najednou z jednoho formulářového pole po vzoru specifikace HTML5 (dříve WebForms2).

Zápis vypadá jednoduše:

<input type="file" multiple="">

v HTML variantě jej můžete zkrátit i na:

<input type=file multiple>

Pomocí JavaScriptu můžete ověřit, kolik souborů uživatel vybral nebo je (resp. jejich názvy) v cyklu projít (kolekce input.files a vlastnost input.files.length
).

Více: ukázka, specifikace.

Sáhněte si na soubor

Tou druhou novinkou je možnost přistupovat přímo z JavaScriptu k obsahu souborů, které uživatel vybral k uploadu pomocí klasického <input type="file">. Dosud bylo totiž nutné takové soubory nahrát na server, z něj získat zpět a teprve pak s nimi šlo dále pracovat. Alternativou bylo použití pluginů, které umožňovaly přímou práci se soubory.

Z JavaScriptu bude pomocí nového API možné zjistit nejen název takového souboru, jeho typ a velikost, ale také přistupovat k jeho obsahu a to třemi asynchronními způsoby (dnes už je takový trend dělat všechny náročnější operace asynchronně, aby nedocházelo k zamrzání stránky v prohlížeči) :
  • readAsBinaryString
  • readAsText
  • readAsDataURL
Zvolená metoda se váže na typ obsahu a co s ním chcete dělat. U textových souborů použijete readAsText. Pokud chcete pracovat s obrázky, ale nemáte v úmyslu je měnit, zvolíte readAsDataURL (následně do vlastnosti můžete img.src nastavit přímo tuto hodnotu a obrázek se zobrazí) atd.

Kompletní specifikace (poměrně čerstvá, první návrh přišel před pár týdny právě od Mozilly) počítá i s výše zmíněným přepínačem multiple (bude tedy možné např. označit všechny fotografie v adresáři a následně s nimi v JavaScriptu pracovat).

Firefox 3.6 zatím neimplementoval specifikaci celou, ale dost na to, aby si ji zájemci mohli vyzkoušet (stahujte Firefox 3.6 beta 4).

Více: video s demem, ukázka, specifikace.

Pozn.: Firefox 3.6 těch novinek přinese víc, ale pro účely tohoto příspěvku nejsou podstatné.

Pozn. 2: Specifikace je nová a zatím jsem nenašel reakce dalších prohlížečů, zda ji budou chtít podporovat nebo ne. Uvidíme.

4 komentáře:

  1. Jesli dobre chapu, slo by s timto konecne udelat interaktivni upload souboru (progress bar apod.) ciste v Javascriptu (bez Flashe)?? Pak tedy 3x slava :)

    OdpovědětSmazat
  2. @peepino Ano půjde to. Zmiňovaná File API specifikace řeší jen rozhraní disk - prohlížeč (čili přebrání jednotlivých souborů, které uživatel zadal pro upload). Pro onen vlastní upload se plánuje s rozšířením XMLHttpRequest (říká se mu XMLHttpRequest 2), kterým půjde takto přebrané soubory interaktivně odesílat.

    Na rozdíl od File API zatím nikdo XMLHttpRequest 2 neimplementoval. Ovšem to se teď může změnit, protože až teď s příchodem File API může být celý proces kompletní.

    OdpovědětSmazat
  3. @peepino Tak jakoby nás u Firefoxu vyslyšeli. V této ukázce je kompletní implementace progress baru pro upload (funguje jen ve FF3.6) http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/

    OdpovědětSmazat
  4. MH: Moc pekny :) Diky za upozorneni..

    OdpovědětSmazat

Poznámka: Komentáře mohou přidávat pouze členové tohoto blogu.