Beispiele für das Lesen und Speichern von Dateien in JavaScript_Javascript-Kenntnissen

Übrigens habe ich heute nur einen flüchtigen Blick auf den Quellcode von Proxy SwitchySharp geworfen und viel gelernt, einschließlich des Lesens und Speicherns von Dateien, die ich in diesem Artikel vorstellen werde.

Da Google die Funktion zum Synchronisieren von Plug-in-Daten noch nicht bereitstellt, müssen beim Importieren und Exportieren von Plug-in-Konfigurationen Dateien berücksichtigt werden. Aus Sicherheitsgründen stellt nur der IE APIs für den Zugriff auf Dateien bereit, aber mit der Einführung von HTML 5 wurde dies auch von anderen Browsern unterstützt.

Lass uns zuerst die Datei lesen. W3C stellt einige Datei-APIs bereit, von denen die FileReader-Klasse die wichtigste ist.

Listen Sie zunächst die HTML-Tags auf, die verwendet werden müssen:

Kopieren Sie den Code Der Code lautet wie folgt:

< input type="file" id="file" onchange="handleFiles(this.files)"/>

Wenn eine Datei ausgewählt wird, wird die Liste mit der Datei (ein FileList-Objekt) angezeigt ) wird als Parameter an die Funktion handleFiles() übergeben.
Dieses FileList-Objekt ähnelt einem Array, Sie können die Anzahl der Dateien kennen und seine Elemente sind Dateiobjekte.
Attribute wie Name, Größe, lastModifiedDate und Typ können von diesem File-Objekt abgerufen werden.
Übergeben Sie dieses File-Objekt an die Lesemethode des FileReader-Objekts, um die Datei zu lesen.

FileReader verfügt über 4 Lesemethoden:
1.readAsArrayBuffer(file): Liest die Datei als ArrayBuffer.
2.readAsBinaryString(file): Liest die Datei als binäre Zeichenfolge
3.readAsDataURL(file): Liest die Datei als Daten-URL
4.readAsText(file, [encoding]): Die Datei wird als Text gelesen und der Standardkodierungswert ist „UTF-8“
Darüber hinaus kann die abort()-Methode das Lesen der Datei stoppen.

Nach dem Lesen der Datei muss das FileReader-Objekt noch verarbeitet werden. Um den aktuellen Thread nicht zu blockieren, übernimmt die API ein Ereignismodell und Sie können diese Ereignisse registrieren:
1.onabort: Wird ausgelöst, wenn unterbrochen
2.onerror: Wird ausgelöst, wenn ein Fehler aufgetreten ist
3. onload: Wenn die Datei erfolgreich gelesen wurde. Auslöser
4.onloadend: Wird ausgelöst, wenn die Datei gelesen wird, unabhängig vom Fehler.
5.onloadstart: Wird ausgelöst, wenn das Lesen der Datei beginnt.
6.onprogress: Wird regelmäßig ausgelöst wenn die Datei gelesen wird

Mit diesen Methoden können Sie Dateien verarbeiten.
Versuchen wir zunächst, eine Textdatei zu lesen:

Code kopieren Der Code lautet wie folgt:

Funktion handleFiles(files) {
if (files .length) {
var file = files[0];
var reader = new FileReader();
if (/text/w /.test(file.type)) {
reader. onload = function() {
                  $('

' this.result '

').appendTo('body'); }




This.result hier ist eigentlich Reader.result, also der Inhalt der gelesenen Datei.
Testen Sie es und Sie werden feststellen, dass der Inhalt dieser Datei zur Webseite hinzugefügt wird. Wenn Sie Chrome verwenden, müssen Sie die Webseite auf dem Server oder in einem Plug-in ablegen. Das Dateiprotokoll schlägt fehl.

Versuchen wir es noch einmal mit Bildern, da der Browser Bilder des Daten-URI-Protokolls direkt anzeigen kann, daher werde ich dieses Mal Bilder hinzufügen:

Code kopieren

Der Code lautet wie folgt:

function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/ text/w /.test(file.type)) {
                                                                                                                            body');
}
reader.readAsText(file);
} else if(/image/w /.test(file .type)) {
reader.onload = function() {
             $('').appendTo('body');
🎜> }
}



Tatsächlich unterstützt die Eingabedateisteuerung auch die Auswahl mehrerer Dateien:

Code kopieren

Der Code lautet wie folgt:

Auf diese Weise muss handleFiles() Dateien durchlaufen und verarbeiten.

Wenn Sie nur einen Teil der Daten lesen möchten, verfügt das File-Objekt auch über die Methoden webkitSlice() oder mozSlice() zum Generieren von Blob-Objekten. Dieses Objekt kann von FileReader auf die gleiche Weise wie das File-Objekt gelesen werden. Diese beiden Methoden empfangen 3 Parameter: Der erste Parameter ist die Startposition; der zweite Parameter ist die Endposition. Wenn er weggelassen wird, wird er bis zum Ende der Datei gelesen. Beispiele finden Sie unter „Lokale Dateien in JavaScript lesen“.

Natürlich kann es neben dem Import von Daten und der Anzeige von Dateien auch für den AJAX-Upload verwendet werden. Informationen zum Code finden Sie unter „Dateien aus Webanwendungen verwenden“.

Der nächste Schritt besteht darin, die Datei zu speichern.

Eigentlich bietet File API: Writer 4 Schnittstellen, aber derzeit implementieren nur einige Browser (Chrome 8 und Firefox 4) BlobBuilder und die restlichen Schnittstellen sind nicht verfügbar.

Für nicht unterstützte Browser können Sie BlobBuilder.js und FileSaver.js verwenden, um Unterstützung zu erhalten.

Ich habe recherchiert und das Geheimnis entdeckt.

BlobBuilder kann ein Blob-Objekt erstellen. Übergeben Sie dieses Blob-Objekt an die Methode URL.createObjectURL(), um eine Objekt-URL abzurufen. Und diese Objekt-URL ist die Download-Adresse dieses Blob-Objekts.
Nachdem Sie die Download-Adresse erhalten haben, erstellen Sie ein a-Element, weisen Sie die Download-Adresse dem href-Attribut zu und weisen Sie den Dateinamen dem Download-Attribut zu (unterstützt von Chrome 14).
Erstellen Sie dann ein Klickereignis und übergeben Sie es zur Verarbeitung an das a-Element, wodurch der Browser mit dem Herunterladen des Blob-Objekts beginnt.

Verwenden Sie abschließend URL.revokeObjectURL(), um die Objekt-URL freizugeben und dem Browser mitzuteilen, dass er nicht mehr auf diese Datei verweisen muss.

Das Folgende ist ein vereinfachter Code:

Kopieren Sie den Code

Der Code lautet wie folgt:var BlobBuilder = BlobBuilder ||. WebKitBlobBuilder;var URL = URL ||

function saveAs(blob, filename) {

var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) { // Download erzwingen, anstatt im Browser zu öffnen var Slice = blob.slice || }

var url = URL.createObjectURL(blob);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = URL;
save_link.download = Dateiname;

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);
URL.revokeObjectURL(url);
}

var bb = new BlobBuilder;

bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world. txt');

Während des Tests werden Sie aufgefordert, eine Textdatei zu speichern. Chrome muss die Webseite auf dem Server oder in einem Plug-in ablegen.