Opcje filreader odczyt jako binarne

W ramach szeregu artykułów omawiam kilka wyzwań, przed którymi stawiłem czoło podczas próby utworzenia bezpłatnego edytora ikony HTML5 i JavaScript. Chciałem, aby użytkownicy mogli otwierać i edytować istniejące pliki ikon w moim edytorze ikon. Ponieważ pliki ikon mogą zawierać wiele klatek, musiałem uzyskać dostęp do poszczególnych ramek, aby mogły być wyświetlane i dostępne do edycji dla użytkownika. Liczba, rozmiar i lokalizacja ramek zawartych w ikonie są zapisywane w nagłówku ikony. Nagłówek ikony to bajty kolekcji znajdujące się na początku pliku ikon, więc musiałem odczytać dane binarne zawarte w pliku. Możemy teraz łatwo czytać pliki w przeglądarce bez konieczności przesyłania żadnych danych z powrotem do serwera. W tej rundy pokazuję, jak możesz czytać dane binarne lokalnego pliku w przeglądarce za pomocą interfejsu HTML5 File API. Na początek będzie dodawał element wejściowy i ustawił atrybut typu do pliku, a następnie w bloku skryptów będziemy obsługiwać wejścia plików onchange. LT ciało gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160160160160 LT identyfikator typu wejście quotbrowseOpenquot quotfilequot GT 160160160160 LT typu skrypt quottextjavascriptquot GT +160160160160160160160160 var fileInput document. getElementById (quotbrowseOpenquot) +160160160160160160160160 funkcja fileInput. onchange () 160160160160160160160160160160160160 klawiszy do onchange przechodzi tutaj 160160160160 160160160160 160160160160 lt lt ciała skrypt GT GT Teraz musimy dodać kod do obsługi zdarzenia onchange. W tym miejscu utworzymy obiekt FileReader. Użyjemy metody readAsBinaryString obiektu FileReader, która da nam surowe dane binarne. Możemy przekazać obiekt File do readAsBinaryString, jeśli chcemy przeczytać cały plik lub możemy przekazać obiekt Blob, jeśli chcemy tylko przeczytać pewną część pliku. W tym przykładzie przekazujemy obiekt File do odczytania całego pliku. Musimy również obsługiwać zdarzenie onloadend programu FileReader, ponieważ dane, które czytamy za pomocą readAsBinaryString, są dostępne tylko wtedy, gdy FileReader odczytał cały plik lub blob. Nasz kod w obsługi zdarzeń onchange wygląda teraz tak. 160160160160160160160160 var fr new FileReader () 160160160160160160160160 fr. onloadend function () 160160160160160160160160160160160160 Kod obsługi zdarzenia onloadend 160160160160 160160160160 160160160160160160160160 fr. readAsBinaryString (this. files 0) W procedurze obsługi zdarzenia onloadend możemy uzyskać dostęp do danych, które zostały właśnie przeczytane przez FileReaders atrybut wyniku. Możemy następnie przechodzić przez atrybut result i wywołać metodę charCodeAt, aby zwrócić wartość całkowitą każdego bajtu. W tym przykładzie będzie konwertować bajt na szesnastkową reprezentację łańcuchów za pomocą metody toString (16), zbudować jeden długą linię, a następnie wyświetlić ciąg do użytkownika. To pełne przykłady pracy. LT DOCTYPE HTML, HTML LT GT GT GT LT głowica tytułowy 160160160160 LT gtReading danych binarnych z API pliku i JavaScriptlt tytułowy gt gt głowicy lt lt lt gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 ciało 160160160160 identyfikator typu wejście quotbrowseOpenquot quotfilequot gt 160160160160 lt typu skrypt quottextjavascriptquot gt 160160160160160160160160 var fileInput document. getElementById (quotbrowseOpenquot) +160160160160160160160160 funkcja fileInput. onchange () 160160160160160160160160160160160160 var fr nowy FileReader () 160160160160160160160160160160160160 funkcja fr. onloadend () 160160160160160160160160160160160160160160160160 var wynik ten. result 160160160160160160160160160160160160160160160160 var heks quotquot 160160160160160160160160160160160160160160160160 dla (var i 0 i lt ten. result. length i) 160160160160160160160160160160160160160160160160160160160160 var bajtStr result. charCodeAt (i).toString (16) 160160160160160160160160160160160 +160160160160160160160160160 if (byteStr. length LT 2) 160160160160160160160160160160160160160160160160160160160160160160160160 byteStr quot0quot byteStr 160160160160160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160160160160160 heks Quot Quot byteStr 160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160 alarmu (Hex) 160160160160160160160160160160160160 160160160160160160160160160160160160 fr. readAsBinaryString (to. files 0) +160160160160160160160160 160160160160 LT skrypcie GT GT lt lt HTML gtreadAsBinaryString mówi, że dane muszą być reprezentowane jako ciąg binarny. gdzie: każdy bajt jest reprezentowany przez liczbę całkowitą w zakresie 0..255. Początkowo JavaScript nie miał typu binarnego (dopóki obsługa WebGL modułu ECMAScript 5s nie została opisana poniżej) - została ona zastąpiona arkuszem ArrayBuffer z serii ECMAScript 2018), a następnie przeszukiwali ze Stringiem gwarancję, że żaden znak przechowywany w łańcuchu nie będzie poza zakresem 0..255. (Mogły to być tabliczki Numbers zamiast tego, ale nie były toby duże Struny były bardziej wydajne niż duże tablice Numbers, ponieważ Numbers są zmiennoprzecinkowe). Jeśli czytasz plik, który jest głównie tekstem w skrypcie zachodnim ( głównie na przykład angielskim), wtedy ten ciąg będzie wyglądał jak tekst. Jeśli czytasz plik ze znakami Unicode, powinieneś zauważyć różnicę, ponieważ ciągi JavaScript to UTF-16 (szczegóły poniżej), a więc niektóre znaki będą miały wartości powyżej 255, podczas gdy ciąg znaków binarnych według specyfikacji pliku API nie miałby dowolne wartości powyżej 255 (masz dwa indywidualne znaki dwóch bajtów punktu kodu Unicode). Jeśli czytasz plik, który nie jest w ogóle tekstem (obraz prawdopodobnie), prawdopodobnie otrzymasz bardzo podobny wynik między readAsText a readAsBinaryString. ale z readAsBinaryString wiesz, że nie będzie żadnej próby interpretacji sekwencji wielobajtowych jako znaków. Nie wiesz, że jeśli używasz readAsText. ponieważ readAsText użyje określenia kodowania, aby spróbować dowiedzieć się, co to jest kodowanie plików, a następnie odwzorować go na ciągi znaków JavaScripts UTF-16. Efekt można zobaczyć, jeśli utworzysz plik i zapisze go w czymś innym niż ASCII lub UTF-8. (W systemie Windows można to zrobić za pomocą Notatnika Zapisz jako kodowanie z rozwijanym Unicode, dzięki któremu patrząc na dane, które wydają się oznaczać UTF-16 Im pewni, że edytory systemu Mac OS i nix mają podobną funkcję). strona, która powoduje wyrzucenie wyniku czytania pliku na dwa sposoby: jeśli używam tego z plikiem testowym 1 2 3 przechowywanym w UTF-16, oto wyniki, które otrzymuję: Jak widzisz, readAsText zinterpretował znaki, a więc dostałem 13 (długość testu 1 2 3), a readAsBinaryString nie zrobił, a więc mam 28 (dwubajtowe BOM plus dwa bajty dla każdego znaku). XMLHttpRequest. response with responseType arraybuffer jest obsługiwany w HTML 5. Ciągi JavaScript są UTF-16 mogą wydawać się nieparzystą wypowiedzią, że po prostu Unicode nie, ciąg JavaScript jest serią jednostek kodu UTF-16, które widzą pary zastępcze jako dwie osobne skrypty JavaScript bohaterowie, mimo że w rzeczywistości, zastępcza para jako całość to tylko jeden charakter. Zobacz link, aby uzyskać szczegółowe informacje. digitalFresh: Ciąg jest danymi binarnymi. Jak komentowałeś, zamieściłem przykład, który może pomóc. JavaScript nie ma typu quotbinaryquot, więc pojechaliśmy ze Stringiem z gwarancją, że żaden znak przechowywany w łańcuchu nie mieści się w zakresie 0..255. (Mogły one przeszukiwać tablicę liczb, ale nie zrobiły tego). Przykład pokazuje, jak uzyskać ciągnącą kwerendę quotcharacterquot z łańcucha. ndash T. J. Crowder Jun 30 10 at 5:09 morpheus: Ponieważ ten materiał jest asynchroniczny, nie może rzucać wyjątków, musisz spojrzeć na interfejs, aby sprawdzić, czy jest jakiś asynchroniczny sposób zgłaszania błędów. I rzeczywiście, FileReader ma to do zaakceptowania. Jeśli używasz pliku: adresu 4747, domena dokumentu jest pusta, co skłania cię do zamknięcia z wielu rzeczy (nie znam szczegółów, nigdy tego nie robię), esp. kiedy SOP wejdzie w to. Jestem pewien, że do przeglądarki jest przynajmniej pewna, że ​​chociaż część zabezpieczeń specyfikacji jest nadal tymczasowa: w3.orgTRFileAPIsekcja bezpieczeństwa - dyskusja Ale nie spodziewałbym się, że będzie działać. ndash T. J. Crowder 5 listopada w 18:12 Wielkie dzięki TJCrowder - usunęłam mój komentarz, aby uniemożliwić innym zrozumienie mojego uproszczenia i dziękuję za wysłanie szczegółów - jestem pewien, że inni znajdą twoje komentarze dużo bardziej pomocne (i czytając artykuł jest naprawdę dobrym pomysłem, jak mówisz, jeśli ktoś kręci się wokół w tej dziedzinie). ndash Brian M. Hunt Dec 30 14 at 14: 16Working z plikami w Javie, część 2: FileReader Wysłany 15 maja 2017 przez Nicholas C. Zakas W moim poprzednim poście. Wprowadziłem pliki w Javie, koncentrując się w szczególności na tym, jak uzyskać dostęp do obiektów File. Obiekty te zawierają metadane plików uzyskiwane tylko wtedy, gdy użytkownik decyduje się przesyłać plik, przeciągać i upuszczać plik na stronę internetową. Gdy masz już pliki, następnym krokiem jest odczytywanie danych z nich. Typ FileReader Typ FileReader ma jedno zadanie: odczytywanie danych z pliku i zapisanie go w zmiennej JavaScript. Interfejs API został celowo zaprojektowany tak, aby był podobny do XMLHttpRequest, ponieważ oba dane są ładowane z zasobów zewnętrznych (poza przeglądarką). Odczyt jest wykonywany asynchronicznie, aby nie blokować przeglądarki. Istnieje kilka formatów, które FileReader może utworzyć, aby reprezentować dane pliku, a podczas żądania odczytu pliku należy go zapytać. Odczytywanie odbywa się przez wywołanie jednej z następujących metod: readAsText () 8211 zwraca zawartość pliku jako zwykłego tekstu readAsBinaryString () 8211 zwraca zawartość pliku jako ciąg zakodowanych danych binarnych (zastępuje 8211 użycie readAsArrayBuffer () zamiast tego) readAsArrayBuffer () 8211 zwraca zawartość pliku jako ArrayBuffer (dobra dla danych binarnych, takich jak obrazy) readAsDataURL () 8211 zwraca zawartość pliku jako adres URL Każda z tych metod powoduje zainicjowanie odczytu pliku podobnego do metody XHR object8217s send () inicjującej żądanie HTTP. Jako taki musisz zacząć odsłuchiwać zdarzenie load. Wynik odczytu jest zawsze reprezentowany przez event. target. result. Na przykład: w tym przykładzie po prostu odczytuje zawartość pliku i wyświetla go w zwykłym tekście do konsoli. Instrukcja obsługi onload jest wywoływana, gdy plik jest pomyślnie odczytywany, podczas gdy onerror handler jest wywoływany, jeśli plik był niewłaściwy z jakiegokolwiek powodu. Instancja FileReader jest dostępna wewnątrz procedury obsługi zdarzeń za pośrednictwem event. target i it8217s zaleca się, aby zamiast odwoływać się bezpośrednio do zmiennej czytnika. Właściwość wyniku zawiera zawartość pliku z powodzeniem i błąd zawiera informacje o błędach dotyczące nieudanej operacji. Odczytywanie identyfikatorów URI danych Można używać tej samej podstawowej konfiguracji do odczytywania identyfikatora URI danych. URI danych (czasem zwane adresami danych) są ciekawą opcją, jeśli chcesz, na przykład, wyświetlić obraz, który właśnie został odczytany z dysku. Można to zrobić za pomocą następującego kodu: Ten kod po prostu wstawia obraz, który został odczytany z dysku na stronę. Ponieważ identyfikator URI danych zawiera wszystkie dane obrazu, może on zostać przesłany bezpośrednio do atrybutu src obrazu i wyświetlany na stronie. Można na przykład załadować obraz i narysować go na ltcanvasgt: Ten kod ładuje dane obrazu do nowego obiektu Image, a następnie używa go do narysowania obrazu na płótnie (określając zarówno szerokość, jak i wysokość jako 100). W tym celu powszechnie wykorzystywane są URI danych, ale mogą być używane w dowolnym typie pliku. Najczęstszym przypadkiem użycia do odczytywania pliku w URI danych jest natychmiastowe wyświetlenie zawartości pliku na stronie internetowej. Czytanie tablic ArrayBuffer Typ ArrayBuffer 1 został po raz pierwszy wprowadzony jako część WebGL. ArrayBuffer reprezentuje ograniczoną liczbę bajtów, która może być używana do przechowywania dowolnych rozmiarów. Sposób odczytywania danych z tablicy ArrayBuffer jest przy użyciu określonego widoku, takiego jak Int8Array. który traktuje podstawowe bajty jako zbiór 8-bitowych liczb całkowitych lub Float32Array. który traktuje podstawowe bajty jako zbiór 32-bitowych liczb zmiennoprzecinkowych. Są to nazywane tablicami typu 2, które zmuszają do pracy z określonym typem numerycznym, a nie zawierającym dowolny typ danych (podobnie jak w przypadku tradycyjnych tablic). Używasz modułu ArrayBuffer głównie w przypadku plików binarnych, aby mieć większą kontrolę nad danymi. It8217s poza zakres tego postu, aby wyjaśnić wszystkie tajniki ArrayBuffer. po prostu zdaj sobie sprawę, że możesz łatwo przeczytać plik w ArrayBuffer, jeśli potrzebujesz. Możesz przekazać ArrayBuffer bezpośrednio do metody sendRow (82) send (), aby wysłać surowe dane do serwera (musisz odczytać te dane z żądania na serwerze w celu odtworzenia pliku), dopóki Twoja przeglądarka w pełni obsługuje poziom XMLHttpRequest 2 3 (najnowsze przeglądarki, w tym Internet Explorer 10 i Opera 12). Odczytywanie danych z pliku za pomocą FileReader jest dość proste. Jeśli wiesz, jak używać XMLHttpRequest. there8217s nie ma powodu, że możesz8217t również czytać dane z plików. W następnej części tej serii you8217 dowiedz się więcej o używaniu zdarzeń FileReader i zrozumiesz więcej o możliwych błędach. Referencje Zastrzeżenia: Wszelkie poglądy i opinie wyrażone w tym artykule są artykułami Nicholasa C. Zakasa i nie odzwierciedlają w żaden sposób mojego pracodawcy, moich kolegów, wydawnictwa Wrox. OReilly Publishing. czy ktokolwiek inny. Mówię tylko dla siebie, nie dla nich. Ostatnie wpisy Dodatkowe informacje