Übrigens habe ich heute nur den Quellcode von Proxy Switchysharp durchsucht und viele Dinge gewonnen, einschließlich des Lesens und Speicherns von Dateien, die in diesem Artikel eingeführt werden sollen.
Da Google nicht die Funktion der Synchronisierung von Plug-in-Daten bereitstellt, müssen die Plug-in-Konfigurationen importieren und exportieren müssen mit Dateien behandelt werden. Aus Sicherheitsgründen bietet nur der IE eine API zum Zugriff auf Dateien. Aber mit der Ankunft von HTML 5 haben es auch andere Browser unterstützt.
Lassen Sie uns zunächst über das Lesen der Datei sprechen. W3C liefert einige Datei -APIs, von denen die wichtigste Klasse für Fileeader ist.
Listen Sie zunächst die HTML -Tags auf, die Sie benötigen:
Kopieren Sie den Code -Code wie folgt: <Eingabe type = "Datei" id = "Datei" onchange = "handle files (this.files)"/>
Wenn eine Datei ausgewählt ist, wird die Liste, die die Datei (ein filelistisches Objekt) enthält, als Parameter an die Funktion "HandleFiles () übergeben.
Dieses filelistische Objekt ähnelt einem Array, das die Anzahl der Dateien erkennen kann, und seine Elemente sind das Dateiobjekt.
Aus diesem Dateiobjekt können Sie Attribute wie Name, Größe, LastModifiedDate und Typ erhalten.
Übergeben Sie dieses Dateiobjekt an die Lesemethode des FileReader -Objekts und Sie können die Datei lesen.
In FileReader gibt es 4 Lesemethoden:
1. ReadasArrayBuffer (Datei): Lesen Sie die Datei als ArrayBuffer.
2. SeetasbinaryString (Datei): Lesen Sie die Datei als binäre Zeichenfolge
3.ReadasDataurl (Datei): Lesen Sie die Datei als Daten -URL
4. Readastext (Datei, [Codierung]): Lesen Sie die Datei als Text. Der Standard-Codierungswert lautet 'UTF-8'
Zusätzlich kann die Abort () -Methode aufhören, die Datei zu lesen.
Das FileReader -Objekt muss nach dem Lesen der Datei verarbeitet werden. Um den aktuellen Thread nicht zu blockieren, nimmt die API ein Ereignismodell an, das diese Ereignisse registrieren kann:
1.OONABORT: Ausgelöst, wenn er unterbrochen wird
2.onError: Ausgelöst, wenn ein Fehler auftritt
3.onload: Ausgelöst, wenn die Datei erfolgreich gelesen wird
4.onloadend: Ausgelöst, wenn die Datei gelesen wird, unabhängig davon, ob sie fehlschlägt oder nicht
5.onloadStart: Ausgelöst, wenn die Datei mit dem Lesen beginnt
6.onprogress: Auslöser regelmäßig, wenn die Datei gelesen wird
Mit diesen Methoden können Sie die Dateien verarbeiten.
Versuchen wir zuerst, Textdateien zu lesen:
Die Codekopie lautet wie folgt:
Funktion Handle (Dateien) {
if (Dateien.length) {
var File = Dateien [0];
var reader = new fileReader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.Result + '</pre>'). appendTo ('body');
}
Reader.Readastext (Datei);
}
}
}
Dies.Result hier ist eigentlich reader.result, das ist der Inhalt der Lesedatei.
Nach dem Testen werden Sie feststellen, dass der Inhalt dieser Datei der Webseite hinzugefügt wurde. Wenn Sie Chrome verwenden, müssen Sie die Webseite auf den Server oder in das Plug-In einstellen, und das Dateiprotokoll fällt fehl.
Versuchen wir die Bilder erneut, da der Browser die Bilder des Data URI -Protokolls direkt anzeigen kann. Fügen Sie diesmal die Bilder hinzu:
Die Codekopie lautet wie folgt:
Funktion Handle (Dateien) {
if (Dateien.length) {
var File = Dateien [0];
var reader = new fileReader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.Result + '</pre>'). appendTo ('body');
}
Reader.Readastext (Datei);
} else if (/image /// w+/. test (Datei.type)) {
reader.onload = function () {
$ ('<img src = "' + this.result + '" />').appendto('Body');
}
Reader.ReadasDataurl (Datei);
}
}
}
Tatsächlich unterstützt die Eingabe: Dateisteuerung auch die Auswahl mehrerer Dateien:
Die Codekopie lautet wie folgt:
<Eingabe type = "Datei" id = "Dateien" multiple = "" onchange = "handle files (this.files)"/>
Auf diese Weise muss HandleFiles () in die Verarbeitung von Dateien durchquert werden.
Wenn Sie nur einen Teil der Daten lesen möchten, verfügt das Dateiobjekt auch mit webkitslice () oder mozslice () -Methoden, mit denen Blob -Objekte generiert werden. Dieses Objekt kann wie das Dateiobjekt von FileReader gelesen werden. Diese beiden Methoden empfangen 3 Parameter: Der erste Parameter ist die Ausgangsposition; Die zweite ist die Endposition, und wenn es weggelassen wird, wird das Ende der Datei gelesen. Der dritte ist der Inhaltstyp.
Beispiele finden Sie unter "Lesen lokaler Dateien in JavaScript".
Natürlich kann es neben dem Importieren von Daten und Anzeigen von Dateien auch für das AJAX -Upload verwendet werden. Der Code kann verwendet werden, um "Dateien aus Webanwendungen zu verwenden" zu verweisen.
Speichern Sie als Nächstes die Datei.
Tatsächlich stellt die Datei -API: Writer 4 Schnittstellen bereit, aber derzeit implementieren nur einige Browser (Chrome 8+ und Firefox 4+) Blobbuilder, und der Rest der Schnittstellen ist 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 es studiert und das Geheimnis entdeckt.
Blobbuilder kann ein Blob -Objekt erstellen. Übergeben Sie dieses BLOB -Objekt an die Methode der URL.CreateObjectUrl () und Sie können eine Objekt -URL erhalten. Und diese Objekt -URL ist die Download -Adresse dieses Blob -Objekts.
Erstellen Sie nach dem Erhalten der Download -Adresse ein Element A, weisen Sie die Download -Adresse dem HREF -Attribut zu und weisen Sie den Dateinamen dem Download -Attribut (unterstützt von Chrome 14+) zu.
Erstellen Sie dann ein Klickereignis und geben Sie es einem Element zur Verarbeitung über, mit dem der Browser das Blob -Objekt herunterlädt.
Verwenden Sie schließlich URL.revokeObjecturl (), um die Objekt -URL freizugeben, und benachrichtigt den Browser, dass es nicht weiter auf die Datei verweisen muss.
Hier ist ein vereinfter Code:
Die Codekopie lautet wie folgt:
var blobbuilder = blobbuilder || Webkitblobbuilder || Mozblobbuilder;
var url = url || webkiturl || Fenster;
Funktion Saveas (Blob, Dateiname) {
var type = blob.type;
var force_savable_type = 'application/octet-Stream';
if (type && type!
var Slice = Blob.Slice || Blob.Webkitslice || Blob.mozslice;
Blob = Slice.call (Blob, 0, Blob.Size, Force_Savable_type);
}
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');
Ereignis.initMouseEvent ('klicken', wahr, falsch, Fenster, 0, 0, 0, 0, 0, falsch, falsch, falsch, falsch, falsch, 0, null);
save_link.dispatchevent (Ereignis);
Url.revokeObjecturl (URL);
}
var bb = neuer Blobbuilder;
BB.Append ('Hallo, Welt!');
Saveas (bb.getblob ('text/plain; charset = utf-8'), 'Hallo Welt.txt');
Eine Textdatei wird aufgefordert, während des Tests zu speichern. Chrome muss Webseiten auf dem Server oder im Plug-In platzieren.