JavaScript-Dateiverarbeitung Teil 2 – Beispielcode-Freigabe zum Lesen von Dateien

In meinem vorherigen Blog habe ich die Verwendung von Dateien in JavaScript vorgestellt, mit besonderem Schwerpunkt darauf, wie man das Datei-Objekt erhält. Erst wenn der Benutzer die Datei durch Hochladen oder Ziehen und Ablegen hochlädt, verfügen diese Objekte über die Metadaten der Datei. Sobald Sie diese Dateien haben, besteht der nächste Schritt darin, die Daten aus diesen Dateien zu lesen.

FileReader-Typ

Der FileReader-Typ hat eine einzige Aufgabe, nämlich Daten aus einer Datei zu lesen und sie in einer JavaScript--Variable zu speichern. Seine API ist absichtlich so konzipiert, dass sie mit XMLHttpRequest identisch ist, da beide Daten von einer externen Ressource (außerhalb des Browsers) laden. Lesevorgänge sind asynchron, sodass sie den Browser nicht verstopfen.

FileReader kann eine Vielzahl von Formaten zur Darstellung von Dateidaten erstellen, und das Format, das zurückgegeben wird, wenn eine Datei liest, ist erforderlich. Der Lesevorgang wird durch Aufrufen einer der folgenden Methoden abgeschlossen:

• readAsText() – gibt den Dateiinhalt im Klartext zurück

• readAsBinaryString() – Gibt den Dateiinhalt in Form verschlüsselter Binärdaten zurückString (diese Methode ist veraltet, bitte verwenden Sie stattdessen readAsArrayBuffer())

• readAsArrayBuffer() – Verwenden Sie die Form von ArrayBuffer, um den Dateiinhalt zurückzugeben (nützlich für Binärdaten wie Bilddateien)

• readAsDataURL() – Verwenden Sie die Form der Daten-URL, um zurückzugeben der Dateiinhalt

So wie die Sendemethode des XHR-Objekts eine HTTP-Anfrage initiiert, initiiert jede der oben genannten Methoden ein Dateilesen. Zu diesem Zeitpunkt müssen Sie das Ladeereignis abhören, bevor Sie mit dem Lesen beginnen. event.target.result gibt immer das Ergebnis des Lesevorgangs zurück. Zum Beispiel:

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsText(file);

In diesem Beispiel lesen wir einfach den Dateiinhalt und geben den Inhalt als Klartext an die Konsole aus. Die Onload-Operation wird aufgerufen, wenn die Datei erfolgreich gelesen wurde, und die Onerror-Operation wird aufgerufen, wenn sie aus irgendeinem Grund nicht gelesen werden kann. Die FileReader-Instanz kann über event.target im Event-Handler abgerufen werden. Es wird empfohlen, sie auf diese Weise zu verwenden, anstatt die Reader-Variable direkt zu verwenden. Das Ergebnisattribut enthält den Dateiinhalt, wenn der Lesevorgang erfolgreich war, und die Fehlermeldung, wenn der Lesevorgang fehlschlägt.

Daten-URI lesen

Sie können eine ähnliche Methode verwenden, um die Datei als Daten-URI zu lesen. Die Daten-URI (manchmal auch Daten-URL genannt) ist beispielsweise eine interessante Option Sie möchten eine von der Festplatte gelesene Bilddatei anzeigen, Sie können dies mit dem folgenden Code tun:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

Dieser Code fügt einfach eine von der Festplatte gelesene Bilddatei auf der Seite ein. Da dieser Daten-URI alle Daten für das Bild enthält, kann er direkt an das src-Attribut des Bildes übergeben und auf der Seite angezeigt werden. Sie können das Bild alternativ laden und auf eine <<a href="//m.sbmmt.com/code/7892.html" target="_blank">Leinwand<code><<a href="//m.sbmmt.com/code/7892.html" target="_blank">canvas</a>>> zeichnen /code>Up:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // wait until the image has been fully processed
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

Dieser Code lädt die Bilddaten in ein neues Bildobjekt und zeichnet es auf eine Leinwand (Breite und Länge sind beide mit 100 angegeben).

Daten-URIs werden hierfür normalerweise verwendet, können aber für jeden Dateityp verwendet werden. Die häufigste Verwendung des Lesens einer Datei als Daten-URI besteht darin, den Dateiinhalt schnell auf einer Webseite anzuzeigen.

ArrayBuffer lesen

Der ArrayBuffer-Typ [1] wurde ursprünglich als Teil von WebGL eingeführt. Ein Arraybuffer stellt eine begrenzte Anzahl von Bytes dar und kann zum Speichern beliebig großer Zahlen verwendet werden. Für das Lesen von ArrayBuffer-Daten ist eine bestimmte Ansicht erforderlich. Beispielsweise verarbeitet Int8Array die darin enthaltenen Bytes als vorzeichenbehaftete 8-Bit-Ganzzahlmenge, während Float32Array die darin enthaltenen Bytes als 32-Bit--Gleitkommazahl verarbeitet von . Diese werden TypArray[2] genannt, was Sie dazu zwingt, mit einem bestimmten numerischen Typ zu arbeiten, anstatt Daten irgendeines Typs zu enthalten (wie ein herkömmliches Array).

Bei der Verarbeitung von Binärdateien können Sie zuerst ArrayBuffer verwenden, um eine detailliertere Kontrolle über die Daten zu erhalten. Es würde den Rahmen dieses Blogs sprengen, alle Vor- und Nachteile von ArrayBuffer zu erklären. Sie sollten sich jedoch darüber im Klaren sein, dass Sie eine Datei bei Bedarf problemlos in einen ArrayBuffer einlesen können. Sie können einen ArrayBuffer direkt an die send()-Methode eines XMLHttpRequest Level 2[3] vollständig unterstützen (unterstützt von den meisten aktuellen Browsern, einschließlich IE10 und Opera12).

Das obige ist der detaillierte Inhalt vonJavaScript-Dateiverarbeitung Teil 2 – Beispielcode-Freigabe zum Lesen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!