Wie kann man Javascript verwenden, um lokale Textdateien zu lesen und Zeile für Zeile zu lesen?

83

Ich habe eine Webseite von HTML + Javascript, die Demo ist. Ich möchte wissen, wie man eine lokale CSV-Datei liest und Zeile für Zeile liest, damit ich Daten aus der CSV-Datei extrahieren kann.

Litaoshen
quelle
2
Überprüfen Sie dies aus html5rocks.com/de/tutorials/file/dndfiles
Hunter Larco
2
Haben Sie Anforderungen an die Browserkompatibilität? Unterstützen Sie speziell ie9 oder weniger?
Nicht geliebt
@ HunterLarco Danke, das Problem ist, dass ich nicht weiß, wie ich jede Zeile aus dem Ergebnis herausholen kann. Ich meine reader.readAsText () gibt alle Daten zurück, anstatt dass ich Zeile für Zeile lesen kann
litaoshen
@LukeMcGregor Keine Anforderungen, nur die Unterstützung der aktuellen Versionen wird in Ordnung sein.
Litaoshen

Antworten:

115

Ohne jQuery:

document.getElementById('file').onchange = function(){

  var file = this.files[0];

  var reader = new FileReader();
  reader.onload = function(progressEvent){
    // Entire file
    console.log(this.result);

    // By lines
    var lines = this.result.split('\n');
    for(var line = 0; line < lines.length; line++){
      console.log(lines[line]);
    }
  };
  reader.readAsText(file);
};

HTML:

<input type="file" name="file" id="file">

Denken Sie daran, Ihren Javascript-Code nach dem Rendern des Dateifelds einzugeben.

Websites
quelle
19
Ich habe 200000 Zeilen (kein Scherz, es ist eine Protokolldatei). Ich denke nicht, dass Ihre Lösung das abdeckt, aber netter Versuch.
Tomáš Zato - Wiedereinsetzung Monica
Diese Lösung funktioniert auch nicht, wenn sich diese Rückgabe (Zeilenvorschub) in einem Feld in Anführungszeichen befindet. Was Tomas betrifft, wenn Sie einen fortgeschritteneren Browser haben, können Sie einen Generator verwenden, um Zeile für Zeile zu lesen, ohne einen "Split" durchzuführen.
Rahly
5
Wo ist der Pfad für die externe Datei, in der wir Zeilen aufnehmen?
Abidinberkay
@ TomášZato Mine ist 100m Linien. Ich habe diese Antwort noch nicht getestet. Wie sind Sie damit umgegangen? Ein Link zu einem Beispiel wäre sehr dankbar! huanPastas, +1 für die Antwort!
Gsamaras
2
@gsamaras Ich erinnere mich nicht genau, aber ich habe einen Stream verwendet, der Daten Stück für Stück liest und dann jedes Mal ein Ereignis ausgibt, das mir begegnet ist \n. Bei 100 m langen Zeilen stoßen Sie jedoch auf eine Tabelle, in der sie in HTML angezeigt werden.
Tomáš Zato - Wiedereinsetzung Monica
37

Mit ES6 wird das Javascript etwas sauberer

handleFiles(input) {

    const file = input.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
        const file = event.target.result;
        const allLines = file.split(/\r\n|\n/);
        // Reading line by line
        allLines.forEach((line) => {
            console.log(line);
        });
    };

    reader.onerror = (event) => {
        alert(event.target.error.name);
    };

    reader.readAsText(file);
}
JuJoDi
quelle
3
stimmte für geteilte Linien mit Regex, was der richtige Weg ist.
Meysam Feghhi
12
Einfachere Regexp:\r?\n
Uhr
1
Ein hervorragendes Beispiel, und ich finde es toll, dass Zeilenenden im Windows- und Unix-Stil behandelt werden. Vielen Dank.
Brad