Jak używać Javascript do czytania lokalnego pliku tekstowego i czytania wiersz po wierszu?

85

Mam stronę internetową utworzoną przez html + javascript, która jest demo, chcę wiedzieć, jak czytać lokalny plik csv i czytać wiersz po wierszu, aby móc wyodrębnić dane z pliku csv.

litaoshen
źródło
2
Sprawdź to html5rocks.com/en/tutorials/file/dndfiles
Hunter Larco
2
czy masz jakieś wymagania dotyczące zgodności przeglądarki? konkretnie d czy wspierasz ie9 lub mniej?
Nie kochany
@HunterLarco dziękuję, problem polega na tym, że nie wiem, jak uzyskać każdą linię z wyniku. Chodzi mi o to, że reader.readAsText () zwraca wszystkie dane zamiast mogę czytać wiersz po wierszu
litaoshen
@LukeMcGregor Brak wymagań, wystarczy wsparcie dla aktualnych wersji będzie OK.
litaoshen

Odpowiedzi:

117

Bez 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">

Pamiętaj, aby umieścić kod javascript po wyrenderowaniu pola pliku.

witryn
źródło
21
Mam 200000 wierszy (nie żartuję, to plik dziennika). Nie sądzę, żeby twoje rozwiązanie to obejmowało, chociaż niezła próba.
Tomáš Zato - Przywróć Monikę
Również to rozwiązanie nie obsługuje, jeśli ten powrót (nowy wiersz) znajduje się w cudzysłowie. Jeśli chodzi o Tomasa, jeśli masz bardziej zaawansowaną przeglądarkę, możesz użyć generatora do czytania wiersz po wierszu bez wykonywania „podziału”.
Rahly
5
gdzie jest ścieżka do zewnętrznego pliku, w którym bierzemy linie?
abidinberkay
@ TomášZato kopalnia to 100m linii. Jednak nie przetestowałem jeszcze tej odpowiedzi. Jak do tego doszedłeś? Link do przykładu byłby bardzo mile widziany! huanPastas, +1 za odpowiedź!
gsamaras
2
@gsamaras Nie pamiętam dokładnie, ale użyłem strumienia, który odczytuje dane kawałek po kawałku, a następnie emituje zdarzenie za każdym razem, gdy się napotkam \n. Ale przy 100m wierszach natrafisz na tabelę z wyświetlaniem ich w HTML.
Tomáš Zato - Przywróć Monikę
37

Używając ES6, javascript staje się trochę czystszy

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
źródło
3
zagłosowano za podzielonymi wierszami za pomocą wyrażenia regularnego, co jest właściwym sposobem.
Meysam Feghhi
13
Prostsze \r?\n
wyrażenie regularne
1
Doskonały przykład i podoba mi się, że obsługiwane są zakończenia linii w stylu Windows i Unix. Dziękuję Ci.
Brad