Als Teil einer Reihe von Artikeln, die ich diskutiere einige der Herausforderungen, die ich konfrontiert, wenn ich versuche, eine HTML5 und JavaScript kostenlose Online-Icons Editor zu bauen. Ich wollte, dass Benutzer in der Lage sind, vorhandene Icon-Dateien in meinem Icon-Editor zu öffnen und zu bearbeiten. Da Icon-Dateien mehrere Frames enthalten können, musste ich auf diese einzelnen Frames zugreifen, damit sie angezeigt und für den Benutzer verfügbar sein können. Die Anzahl, Größe und Lage der in einem Symbol enthaltenen Frames sind alle im Icon Header gespeichert. Der Icon-Header ist ein Sammlungsbytes, das sich am Anfang einer Icon-Datei befindet, also musste ich die in der Datei enthaltenen Binärdaten lesen. Wir können jetzt Dateien einfach im Browser lesen, ohne dass wir keine Daten an einen Server senden müssen. In dieser Tranche zeige ich, wie man mit der HTML5 File API binäre Daten einer lokalen Datei im Browser lesen kann. Um zu beginnen, würde man ein Eingabeelement hinzufügen und das Typattribut auf Datei setzen, dann werden wir in einem Script-Block die Datei-Eingaben auf das Exchange-Ereignis behandeln. lt Körper gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160.160.160.160 lt input id quotbrowseOpenquot Typ quotfilequot gt 160.160.160.160 lt script type quottextjavascriptquot gt 160160160160160160160160 var FileInput - document. getElementById (quotbrowseOpenquot) 160160160160160160160160 fileInput. onchange function () 160160160160160160160160160160160160-Code onChange Ereignis zu behandeln geht hier 160160160160 160160160160 160160160160 lt Skript gt lt Körper gt Jetzt müssen wir den Code hinzufügen, um das onchange - Ereignis zu behandeln. Hier werden wir ein FileReader-Objekt erstellen. Wir verwenden die readAsBinaryString-Methode des FileReader-Objekts, die uns die rohen Binärdaten gibt. Wir können ein File-Objekt an den readAsBinaryString übergeben, wenn wir die ganze Datei lesen wollen oder ein Blob-Objekt übergeben können, wenn wir nur einen bestimmten Abschnitt einer Datei lesen wollen. In diesem Beispiel werden wir ein File-Objekt übergeben, um die gesamte Datei zu lesen. Wir müssen auch das onladend-Ereignis des FileReaders behandeln, da die Daten, die wir mit readAsBinaryString lesen, nur verfügbar sind, wenn die gesamte Datei oder der Blob vom FileReader gelesen wurde. Unser Code in der onchange Event-Handler sieht jetzt so aus. 160160160160160160160160 var fr new FileReader () 160160160160160160160160 fr. onloadd Funktion () 160160160160160160160160160160160160 Code zum Umgang mit geladenem Ereignis 160160160160 160160160160 160160160160160160160160 fr. readAsBinaryString (diese. files 0) Im onladend Event-Handler können wir auf die Daten zugreifen, die gerade über die FileReader gelesen wurden Ergebnisattribut. Wir können dann das Ergebnisattribut durchlaufen und die Methode charCodeAt aufrufen, um einen Integer-Wert jedes Bytes zurückzugeben. In diesem Beispiel werde ich das Byte in eine hexadezimale Stringdarstellung mit toString (16) konvertieren, eine lange Zeichenkette aufbauen und dann den String dem Benutzer anzeigen. Heres das volle Arbeitsbeispiel. lt DOCTYPE HTML gt lt html gt lt Kopf gt 160160160160 lt Titel gtReading Binärdaten mit dem File API und JavaScriptlt Titel gt lt Kopf gt lt Körper gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160160160160 lt input id quotbrowseOpenquot Typ quotfilequot gt 160160160160 lt script type quottextjavascriptquot gt 160160160160160160160160 var FileInput - document. getElementById (quotbrowseOpenquot) 160160160160160160160160 fileInput. onchange function () 160160160160160160160160160160160160 var fr neue Filereader () 160160160160160160160160160160160160 fr. onloadend function () 160160160160160160160160160160160160160160160160 var Ergebnis dieser. RESULT 160160160160160160160160160160160160160160160160 var hex quotquot 160160160160160160160160160160160160160160160160 for (var i 0 i lt dieses. result. length i) 160160160160160160160160160160160160160160160160160160160160 var byteStr result. charCodeAt (i).toString (16) 160160160160160160160160160160160160160160160160160160160160 if (byteStr. length lt 2) 160160160160160160160160160160160160160160160160160160160160160160160160 byteStr quot0quot byteStr 160160160160160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160160160160160 hex quot quot byteStr 160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160 alert (hex) 160160160160160160160160160160160160 160160160160160160160160160160160160 fr. readAsBinaryString (diese. files 0) 160160160160160160160160 160160160160 lt Skript gt lt Körper gt lt html gtreadAsBinaryString sagt, dass die Daten als binäre Zeichenfolge dargestellt werden müssen. Wo: jedes Byte wird durch eine Ganzzahl im Bereich 0..255 dargestellt. JavaScript hatte ursprünglich keinen binären Typ (bis ECMAScript 5s WebGL Unterstützung von Typed Array (Details unten) - es wurde durch ECMAScript 2015s ArrayBuffer ersetzt) und so gingen sie mit einem String mit der Garantie, dass kein Zeichen in der String gespeichert wäre Außerhalb des Bereichs 0..255. (Sie könnten stattdessen mit einer Reihe von Zahlen gegangen sein, aber sie waren nicht vielleicht große Strings mehr Speicher-effizient als große Arrays von Zahlen, da Zahlen sind Gleitkomma.) Wenn Sie eine Datei lesen, die meistens Text in einem westlichen Skript ( Meist englisch, zum Beispiel), dann wird diese Saite wie ein Text aussehen. Wenn Sie eine Datei mit Unicode-Zeichen in ihr lesen, sollten Sie einen Unterschied bemerken, da JavaScript-Strings UTF-16 sind (Details unten) und so einige Charaktere Werte über 255 haben, wohingegen eine binäre Zeichenfolge nach der Datei-API-Spezifikation nicht haben würde Alle Werte über 255 (Sie haben zwei einzelne Zeichen für die beiden Bytes des Unicode-Code-Punktes). Wenn du eine Datei liest, die überhaupt keinen Text liest (ein Bild vielleicht), so bekommst du wohl noch ein sehr ähnliches Ergebnis zwischen readAsText und readAsBinaryString. Aber mit readAsBinaryString wissen Sie, dass es keinen Versuch gibt, Multi-Byte-Sequenzen als Zeichen zu interpretieren. Sie wissen das nicht, wenn Sie readAsText verwenden. Denn readAsText wird eine Codierungsbestimmung verwenden, um zu versuchen, herauszufinden, was die Dateikodierung ist und dann auf JavaScripts UTF-16 Strings abbilden. Sie können den Effekt sehen, wenn Sie eine Datei erstellen und sie in etwas anderes als ASCII oder UTF-8 speichern. (In Windows können Sie dies über Notepad die Save As als Codierung Drop-Down mit Unicode auf sie, durch die Blick auf die Daten, die sie scheinen zu bedeuten, UTF-16 Im sicher Mac OS und nix Editoren haben ein ähnliches Feature.) Heres Eine Seite, die das Ergebnis des Lesens einer Datei auf beide Weisen ablegt: Wenn ich das mit einer Testversion 1 2 3 Datei verwende, die in UTF-16 gespeichert ist, hier sind die Ergebnisse, die ich bekomme: Wie du sehen kannst, hat readAsText die Charaktere interpretiert und so bekam ich 13 (die Länge von Testing 1 2 3) und readAsBinaryString didnt, und so bekam ich 28 (die Zwei-Byte-Stückliste plus zwei Bytes für jedes Zeichen). XMLHttpRequest. response mit responseType arraybuffer wird in HTML 5 unterstützt. JavaScript-Strings sind UTF-16 mag wie eine ungerade Aussage arent sie nur Unicode Nein, ein JavaScript-String ist eine Reihe von UTF-16 Code-Einheiten sehen Sie Surrogat-Paare als zwei einzelne JavaScript Charaktere, obwohl in der Tat das Surrogat-Paar als Ganzes nur ein Charakter ist. Siehe den Link für Details. DigitalFresh: Die Zeichenfolge ist die Binärdaten. Wie du kommentiert hast, habe ich ein Beispiel geschrieben, das helfen kann. JavaScript doesn39t haben einen quotbinaryquot Typ und so gingen sie mit einem String mit der Garantie, dass kein Zeichen in der Zeichenfolge lag außerhalb des Bereichs 0..255. (Sie könnten stattdessen mit einer Reihe von Zahlen gegangen sein, aber sie haben es nicht getan.) Das Beispiel zeigt, wie man den Rohwert eines Quatscharktes aus der Zeichenkette erhält. Ndash T. J. Crowder Jun 30 10 at 5:09 morpheus: Weil dieses Zeug asynchron ist, kann es Ausnahmen, die du brauchst, um die Schnittstelle zu sehen, um zu sehen, ob es irgendeine asynchrone Art und Weise gibt es Fehler. Und in der Tat hat FileReader dazu geführt. Wenn du eine Datei nimmst: 4747 URL, deine Dokumentdomäne ist null, was dazu neigt, dich von vielen Dingen zu beenden (ich kenne die Details nicht, ich mache es nie), esp. Wenn die SOP hineingeht. I39m ziemlich sicher it39s bis zum Browser, zumindest für jetzt, da der Sicherheitsteil der Spezifikation noch vorläufig ist: w3.orgTRFileAPIsecurity-Diskussion Aber ich würde es nicht erwarten zu arbeiten. Ndash T. J. Crowder Nov 5 10 at 18:12 Vielen Dank TJCrowder - Ich habe meinen Kommentar gelöscht, um zu verhindern, dass andere von meiner Vereinfachung irregeführt werden, und danke für die Veröffentlichung der Details - ich bin mir sicher, dass andere deine Kommentare viel mehr hilfreich finden (und das Lesen der Artikel ist wirklich eine gute Idee, wie Sie sagen, wenn man in diesem Bereich herumtreibt). Ndash Brian M. Hunt Dez 30 14 bei 14: 16Arbeiten mit Dateien in JavaScript, Teil 2: FileReader Geschrieben am 15. Mai 2012 von Nicholas C. Zakas In meinem vorherigen Beitrag. Ich habe mit der Verwendung von Dateien in JavaScript, konzentriert sich speziell auf, wie man Zugriff auf Datei-Objekte zu bekommen. Diese Objekte enthalten Datei-Metadaten, die nur dann erhalten werden, wenn der Benutzer sich dafür entscheidet, eine Datei hochzuladen oder eine Datei auf die Webseite zu ziehen und zu löschen. Sobald Sie Dateien haben, aber der nächste Schritt ist, Daten von ihnen zu lesen. Der FileReader-Typ Der FileReader-Typ hat einen einzelnen Job: um Daten aus einer Datei zu lesen und in einer JavaScript-Variable zu speichern. Die API ist absichtlich so konzipiert, dass sie ähnlich wie XMLHttpRequest ist, da beide Daten von einer externen (außerhalb des Browser) Ressourcen laden. Das Lesen wird asynchron durchgeführt, um den Browser nicht zu blockieren. Es gibt mehrere Formate, die ein FileReader erstellen kann, um die Dateidaten darzustellen, und das Format muss angefordert werden, wenn die Datei gelesen wird. Das Lesen wird durch das Aufrufen einer dieser Methoden durchgeführt: readAsText () 8211 gibt den Dateiinhalt als Klartext zurück readAsBinaryString () 8211 gibt den Dateiinhalt als String von verschlüsselten Binärdaten zurück (veraltete 8211 verwenden readAsArrayBuffer () stattdessen) readAsArrayBuffer () 8211 gibt zurück Der Dateiinhalt als ArrayBuffer (gut für Binärdaten wie Bilder) readAsDataURL () 8211 gibt den Dateiinhalt als Daten-URL zurück. Jede dieser Methoden initiiert eine Datei, die ähnlich der XHR-Objekt8217s send () - Methode ist, die eine HTTP-Anforderung initiiert. Als solches musst du auf das Ladeereignis hören, bevor du gehst zu lesen. Das Ergebnis des Lesens wird immer durch event. target. result dargestellt. Zum Beispiel: Dieses Beispiel liest einfach den Inhalt einer Datei und gibt sie in Klartext an die Konsole aus. Der Onload-Handler wird aufgerufen, wenn die Datei erfolgreich gelesen wird, während der Onerror-Handler aufgerufen wird, wenn die Datei aus irgendeinem Grund gelesen wurde. Die FileReader-Instanz ist innerhalb des Event-Handlers über event. target und it8217s verfügbar, die empfohlen werden, anstatt die Reader-Variable direkt zu referenzieren. Die Ergebnis-Eigenschaft enthält die Dateiinhalte auf Erfolg und Fehler enthält Fehlerinformationen über die fehlgeschlagene Operation. Lesen von Daten-URIs Sie können die gleiche Grundeinstellung für das Lesen zu einem Daten-URI verwenden. Daten-URIs (manchmal auch als Daten-URLs bezeichnet) sind eine interessante Option, wenn Sie beispielsweise ein Bild anzeigen möchten, das gerade von der Festplatte gelesen wurde. Sie können dies mit dem folgenden Code tun: Dieser Code fügt einfach ein Bild ein, das vom Datenträger in eine Seite gelesen wurde. Da der Daten-URI alle Bilddaten enthält, kann er direkt in das src-Attribut eines Bildes übergeben und auf der Seite angezeigt werden. Sie können abwechselnd das Bild laden und es auch auf ein ltcanvasgt ziehen: Dieser Code lädt die Bilddaten in ein neues Bildobjekt und verwendet dann das Bild, um das Bild auf eine Leinwand zu zeichnen (wobei sowohl die Breite als auch die Höhe als 100 angegeben sind). Daten-URIs werden in der Regel für diesen Zweck verwendet, können aber auch für jede Art von Datei verwendet werden. Der häufigste Anwendungsfall zum Lesen einer Datei in einen Daten-URI ist, den Dateiinhalt auf einer Webseite sofort anzuzeigen. Lesen von ArrayBuffers Der ArrayBuffer Typ 1 wurde zuerst als Teil von WebGL eingeführt. Ein ArrayBuffer repräsentiert eine endliche Anzahl von Bytes, die verwendet werden können, um Zahlen beliebiger Größe zu speichern. Die Art, wie Daten von einem ArrayBuffer gelesen werden, ist die Verwendung einer bestimmten Ansicht, wie z. B. Int8Array. Die die zugrunde liegenden Bytes als eine Sammlung von 8-Bit-signierten Ganzzahlen oder Float32Array behandelt. Die die zugrunde liegenden Bytes als eine Sammlung von 32-Bit-Gleitkommazahlen behandelt. Diese werden als typisierte Arrays bezeichnet 2., die dich dazu zwingen, mit einem bestimmten numerischen Typ zu arbeiten, anstatt irgendwelche Arten von Daten zu enthalten (wie bei herkömmlichen Arrays). Sie verwenden einen ArrayBuffer in erster Linie beim Umgang mit Binärdateien, um eine feinkörnigere Kontrolle über die Daten zu haben. Es8217s jenseits des Geltungsbereichs dieses Beitrags, um alle Ins und Outs von ArrayBuffer zu erklären. Ich weiß nur, dass du eine Datei in einem ArrayBuffer ziemlich leicht lesen kannst, wenn du es brauchst. Sie können einen ArrayBuffer direkt in eine XHR object8217s send () - Methode übergeben, um die Rohdaten an den Server zu senden (Sie müssen diese Daten von der Anforderung auf dem Server lesen, um die Datei zu rekonstruieren), solange Ihr Browser vollständig unterstützt XMLHttpRequest Level 2 3 (neueste Browser, einschließlich Internet Explorer 10 und Opera 12). Das Lesen von Daten aus einer Datei mit einem FileReader ist ziemlich einfach. Wenn Sie wissen, wie Sie XMLHttpRequest verwenden können. There8217s kein Grund, dass Sie auch Daten aus Dateien lesen können. Im nächsten Teil dieser Serie erfahren Sie mehr über die Verwendung der FileReader-Events und erfahren Sie mehr über mögliche Fehler. Referenzen Haftungsausschluss: Alle Standpunkte und Meinungen in diesem Artikel sind die von Nicholas C. Zakas und nicht in irgendeiner Weise, die von meinem Arbeitgeber, meine Kollegen, Wrox Publishing widerspiegeln. OReilly Verlag. Oder jemand anderes. Ich spreche nur für mich, nicht für sie. Aktuelle Beiträge Zusätzliche Informationen
No comments:
Post a Comment