Lernen Sie, Dateien mit JavaScript zu lesen und zu speichern
In der Spalte „Javascript“ erfahren Sie, wie Sie Dateien mit JavaScript lesen und speichern.
Verwandte kostenlose Lernempfehlungen:
(Video)Zuerst lesen wir die Datei. 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:Da Google die Funktion zum Synchronisieren von Plug-in-Daten noch nicht bereitstellt, müssen beim Importieren und Exportieren von Plug-in-Konfigurationen Dateien verarbeitet 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.
<input type="file" id="file" onchange="handleFiles(this.files)"/>Wenn eine Datei ausgewählt wird, wird die Liste, die die Datei enthält (ein FileList-Objekt), 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. Sie können Attribute wie Name, Größe, lastModifiedDate und Typ von diesem Dateiobjekt abrufen. Übergeben Sie dieses File-Objekt an die Lesemethode des FileReader-Objekts, um die Datei zu lesen. FileReader verfügt über 4 Lesemethoden: readAsArrayBuffer(file): Liest die Datei als ArrayBuffer. ReadAsBinaryString(file): Liest die Datei als Binärzeichenfolge readAsDataURL(file): Liest die Datei als Daten-URL readAsText(file, [encoding]): Liest die Datei als Text, die Codierung ist standardmäßig Der Wert ist 'UTF-8' Darüber hinaus kann die abort()-Methode das Lesen der Datei stoppen. Nachdem das FileReader-Objekt die Datei gelesen hat, muss sie noch verarbeitet werden. Um den aktuellen Thread nicht zu blockieren, übernimmt die API ein Ereignismodell und Sie können diese Ereignisse registrieren: onabort: ausgelöst, wenn unterbrochen onerror: ausgelöst, wenn ein Fehler aufgetreten ist onload: ausgelöst, wenn die Datei erfolgreich gelesen wurde
onloadend: Die Datei wurde vollständig gelesen. Wird jedes Mal ausgelöst, egal ob es fehlschlägt oder nicht. onloadstart: Wird ausgelöst, wenn das Lesen der Datei beginnt verarbeitet werden kann. Datei lesen Versuchen wir zunächst, eine Textdatei zu lesen:
function handleFiles(files) { if (files.length) { var file = files[0]; var reader = new FileReader(); if (/text/w+/.test(file.type)) { reader.onload = function() { $('<pre class="brush:php;toolbar:false">' + this.result + '').appendTo('body'); } reader.readAsText(file); } } }
<span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result,也就是读取出来的文件内容。</span>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 dem Bild, da der Browser das Bild des Daten-URI-Protokolls direkt anzeigen kann. Daher werden wir dieses Mal das Bild hinzufügen:
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text/w+/.test(file.type)) {
reader.onload = function() {
$('<pre class="brush:php;toolbar:false">' + this.result + '
').appendTo('body');
}
reader.readAsText(file);
} else if(/image/w+/.test(file.type)) {
reader.onload = function() {
$('
').appendTo('body');
}
reader.readAsDataURL(file);
}
}
}
Tatsächlich unterstützt das Eingabe-: Dateisteuerelement auch die Auswahl mehrerer Dateien: <input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>Auf diese Weise handleFiles() Es ist notwendig, Dateien zu durchlaufen und zu 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. Den Code finden Sie unter „Dateien aus Webanwendungen verwenden“. Dateien speichern Tatsächlich 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 gelüftet. 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 (Chrome 14+ unterstützt). 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.
最后,用URL.revokeObjectURL()来释放这个object URL,通知浏览器可以不必继续引用这个文件了。
下面就是一段化简的代码:
var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder; var URL = URL || webkitURL || window; function saveAs(blob, filename) { var type = blob.type; var force_saveable_type = 'application/octet-stream'; if (type && type != force_saveable_type) { // 强制下载,而非在浏览器中打开 var slice = blob.slice || blob.webkitSlice || blob.mozSlice; blob = slice.call(blob, 0, blob.size, force_saveable_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 = filename; 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');
测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。
附:写文件工具类(干货)
/** * 写文件 * @param fileName 文件名 * @param data 文件流 * @param path 写入路径 * @return boolean */ public static boolean writeFile(String fileName,String data,String path) { try { // System.out.println("fileContent:" + data); File file = new File(path + fileName); if(!file.exists()){ file.createNewFile(); } FileOutputStream outStream = new FileOutputStream(file); outStream.write(data.getBytes()); outStream.flush(); outStream.close(); outStream = null; return(true); } catch (Exception e) { e.printStackTrace(); return(false); } }
Das obige ist der detaillierte Inhalt vonLernen Sie, Dateien mit JavaScript zu lesen und zu speichern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Es gibt drei gängige Möglichkeiten, HTTP-Anforderungen in Node.js zu initiieren: Verwenden Sie integrierte Module, Axios und Knotenfetch. 1. Verwenden Sie das integrierte HTTP/HTTPS-Modul ohne Abhängigkeiten, das für grundlegende Szenarien geeignet ist, jedoch eine manuelle Verarbeitung von Datengenähten und Fehlerüberwachung erfordert, z. 2.Axios ist eine auf Versprechen basierende Bibliothek von Drittanbietern. Es verfügt über eine kurze Syntax und leistungsstarke Funktionen, unterstützt Async/Auseait, automatische JSON -Konvertierung, Interceptor usw. Es wird empfohlen, asynchrone Anforderungsvorgänge zu vereinfachen. 3.Node-Fetch bietet einen Stil ähnlich dem Browser-Abruf, basierend auf Versprechen und einfacher Syntax

JavaScript -Datentypen sind in primitive Typen und Referenztypen unterteilt. Zu den primitiven Typen gehören String, Anzahl, Boolesche, Null, undefiniertes und Symbol. Die Werte sind unveränderlich und Kopien werden bei der Zuweisung von Werten kopiert, sodass sie sich nicht gegenseitig beeinflussen. Referenztypen wie Objekte, Arrays und Funktionen speichern Speicheradressen, und Variablen, die auf dasselbe Objekt zeigen, wirkt sich gegenseitig aus. Typeof und Instanz können verwendet werden, um die Typen zu bestimmen, aber auf die historischen Probleme der TypeOfnull zu achten. Das Verständnis dieser beiden Arten von Unterschieden kann dazu beitragen, einen stabileren und zuverlässigeren Code zu schreiben.

Die Filter () -Methode in JavaScript wird verwendet, um ein neues Array mit allen bestehenden Testelementen zu erstellen. 1.Filter () ändert das ursprüngliche Array nicht, sondern gibt ein neues Array zurück, das den bedingten Elementen entspricht. 2. Die grundlegende Syntax ist Array.filter ((Element) => {returncondition;}); 3. Das Objektarray kann durch Attributwert gefiltert werden, z. B. die Filterung von Benutzern älter als 30; V. 5. kann dynamische Bedingungen umgehen und Filterparameter in Funktionen übergeben, um eine flexible Filterung zu erreichen. 6. Wenn Sie es verwenden, achten Sie darauf, dass die booleschen Werte zurückgegeben werden, um leere Arrays zurückzugeben, und kombinieren Sie andere Methoden, um eine komplexe Logik wie die String -Matching zu erreichen.

Überprüfen Sie in JavaScript, ob ein Array einen bestimmten Wert enthält. Die häufigste Methode ist include (), die einen Booleschen Wert zurückgibt und die Syntax Array.includes (Valuetofind) ist, z. B. Früchte. Wenn es mit der alten Umgebung kompatibel sein muss, verwenden Sie Indexof () wie Zahlen.Indexof (20)! ==-1 gibt True zurück; Für Objekte oder komplexe Daten sollte eine () -Methode für einen eingehenden Vergleich verwendet werden, wie z. B. Benutzer.

Um Fehler in asynchronen Funktionen zu bewältigen, verwenden Sie Try/Catch, verarbeiten Sie sie in der Anrufkette, verwenden Sie die .catch () -Methode und hören Sie auf uneingeschränkte Ereignisse zu. 1. Verwenden Sie Try/Catch, um Fehler aufzufangen, ist die empfohlene Methode mit einer klaren Struktur und kann Ausnahmen in Wartezeiten bewältigen. 2. Die Handhabungsfehler in der Anrufkette können eine zentralisierte Logik sein, die für mehrstufige Prozesse geeignet ist. 3.. V. Die obigen Methoden stellen gemeinsam sicher, dass asynchrone Fehler korrekt erfasst und verarbeitet werden.

Der Schlüssel zum Umgang mit JavaScript -Zeitzonenproblemen liegt darin, die richtige Methode auszuwählen. 1. Bei der Verwendung von nativen Datumsobjekten wird empfohlen, in UTC -Zeit zu speichern und zu übertragen und bei der Anzeige in die lokale Zeitzone des Benutzers umzuwandeln. 2. Für komplexe Zeitzonenvorgänge kann Moment-TimeZone verwendet werden, das die IANA-Zeitzonendatenbank unterstützt und bequeme Formatierungs- und Konvertierungsfunktionen bietet. 3. Wenn Sie die Anzeigezeit lokalisieren müssen und keine Bibliotheken von Drittanbietern einführen möchten, können Sie intl.datetimeFormat verwenden. V.

Virtual DOM ist ein Programmierkonzept, das reale DOM -Updates optimiert. Durch das Erstellen einer Baumstruktur, die dem realen DOM im Speicher entspricht, vermeidet sie häufig und direkter Betrieb von realem DOM. Sein Kernprinzip ist: 1. Generieren Sie ein neues virtuelles DOM, wenn sich die Daten ändert; 2. Finden Sie den kleinsten Unterschied zwischen den neuen und alten virtuellen Doms; 3. Batch -Update des realen DOM, um den Overhead von Umlagerung und Neuausrichtung zu verringern. Darüber hinaus kann die Verwendung eines einzigartigen stabilen Schlüssels die Effizienz des Listenvergleichs verbessern, während einige moderne Rahmenbedingungen andere Technologien eingesetzt haben, um virtuelles DOM zu ersetzen.

FunktionalprogramminginjavaScript -formphaSizeClean, PredictableCodethroughCoreConcept.1.PureFunctionsConsistenyReturnturTHesameputWitHoutSideEffects, Verbesserung der Testabilität undPrediktabilität
