Einfache client-seitige Dateiverarbeitung ohne Aktualisierung

Question

Was ist eine saubere und einfache JavaScript Lösung für den folgenden Anwendungsfall:

Auf einer Webseite wählt der Benutzer eine Textdatei aus und lädt sie von seinem lokalen Dateisystem hoch. Anstatt die Datei auf einen Server zu laden, öffnet und verarbeitet der clientseitige Javascript-Code den Inhalt der Datei und schreibt die Ergebnisse auf dieselbe Seite, ohne die Seite zu aktualisieren.

Hinweis: Ich brauche den Inhalt der Datei nicht zu speichern - wenn der Benutzer die Seite schließt, geht der Inhalt verloren, und das ist in Ordnung. Alles sollte auf der Seite auf der Client-Seite passieren - keine Notwendigkeit, den Server zu berühren.

Wenn es etwas Leichtes gibt JQuery Plug-in dafür, würde es gerne wissen!

Answer 1

Wovon Sie sprechen, ist die HTML5 File API. Ich bin nicht sicher, was ist der beste Link, um es zu beschreiben, aber dies könnte helfen. https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Answer 2

Der Einfachheit halber hier ein Beispiel für das Öffnen und Drucken einer Textdatei:

<input type='file' id='file-input' />

let fileInput = document.getElementById('file-input')

fileInput.onchange = () => {
  const reader = new FileReader()
  reader.onload = (e) => console.log('file contents:', e.target.result)

  for (let file of fileInput.files) {
    reader.readAsText(file)
  }
}

Der von JayC angegebene Link enthält auch Beispiele für readAsBinary und readAsDataURL.