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.



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.


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);
}

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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.