Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Sierpień 27th, 2011

HTML5: File, File Writer i FileSystem API

Autor: Piotr Karpiuk o 27. sierpnia 2011

Przedmiotem dzisiejszego posta jest wchodzące w skład HTML5 API dzięki któremu JavaScript może w przeglądarce operować na plikach lokalnych, co można wykorzystać do tworzenia cache’y i danych offline na użytek aplikacji (np. baza emaili w webowym kliencie poczty, dostępna nawet po utracie połączenia z Internetem). Póki co API zaimplementowane jest w Google Chrome 9+, a jego podstawy (File API) w Firefox 3.6.3+.

Czytelnik obeznany z obsługą AJAXa (zwłaszcza w najnowszej, drugiej wersji) odnajdzie się tu bez trudu, ponieważ sposób wykonywania operacji I/O jest bliźniaczo podobny jak w XMLHttpRequest2. Tu również mamy do dyspozycji zdarzenia które pozwalają nam monitorować przebieg operacji (obsługując je możemy np. uaktualniać pasek postępu), podobnie jak mamy do wyboru tryb asynchroniczny i synchroniczny (ten drugi z przeznaczeniem dla osobnych wątków – WebWorkers). Zawartość pliku możemy traktować jako łańcuch, Data URL, blob, lub ArrayBuffer. Data URL to (w uproszczeniu) łańcuch reprezentujący tablicę bajtów w Base64 – można go użyć w HTMLowym img.src (czyli jako źródło danych wyświetlanego obrazka). Dwa ostatnie typy danych zostały wprowadzone ponieważ sam JavaScript nie udostępnia typu całkowitoliczbowego ani wydajnej implementacji tablicy bajtów, przy czym ArrayBuffer reprezentuje bufor danych na potrzeby WebGL.

File

File API pozwala reprezentować w przeglądarce plik, jak również uzyskać dostęp do metadanych plików lokalnych wybranych w formularzu przez użytkownika, oraz dostęp do danych zawartych w plikach (odczyt). Istotna nowinka znacząco poprawiająca doznania Internautów: teraz w kontrolce wyboru pliku dzięki atrybutowi multiple użytkownik może wybrać wiele plików naraz, a dzięki webkitdirectory nawet cały katalog. Może też przeciągać pliki z pulpitu do formularza na stronie WWW i odwrotnie. Po wyborze plików, a przed wysłaniem ich do serwera, z poziomu JavaScriptu możemy ustalić dla każdego z nich nazwę, rozmiar, typ MIME, datę ostatniej modyfikacji itp., a także wczytać zawartość pliku do przeglądarki. Dzięki temu możemy np. już w przeglądarce stwierdzić że plik jest zbyt duży aby przesyłać go na serwer, wyświetlić podgląd obrazka (ang. thumbnail), ewentualnie zapisać zawartość pliku w systemie plików zarezerwowanym dla aplikacji webowej (patrz FileSystem API dalej) tak aby była dostępna offline gdy nie ma dostępu do Internetu itd.

Czytaj więcej »

Tags: ,
Napisany w Google Chrome, WWW | Brak komentarzy »