Как использовать Javascript для чтения локального текстового файла и чтения построчно?

85

У меня есть веб-страница, созданная с помощью html + javascript, которая является демонстрационной, я хочу знать, как читать локальный файл csv и читать построчно, чтобы я мог извлекать данные из файла csv.

Litaoshen
источник
2
Посетите html5rocks.com/en/tutorials/file/dndfiles
Хантер Ларко,
2
у вас есть какие-либо требования к совместимости с браузером? в частности, вы поддерживаете ie9 или меньше?
Не любил
@HunterLarco спасибо, проблема в том, что я не знаю, как получить каждую строчку из результата. Я имею в виду reader.readAsText () возвращает все данные, а не я могу читать построчно
litaoshen
@LukeMcGregor Никаких требований, просто поддержка текущих версий будет в порядке.
litaoshen

Ответы:

117

Без 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">

Не забудьте поместить свой код javascript после отображения поля файла.

места
источник
21
У меня 200000 строк (не шучу, это лог-файл). Я не думаю, что ваше решение покрывает это, хотя хорошая попытка.
Томаш Зато - Восстановите Монику
Кроме того, это решение не обрабатывается, если этот возврат (перевод строки) находится внутри поля, заключенного в кавычки. Что касается Томаса, если у вас более продвинутый браузер, вы можете использовать генератор для чтения построчно без «разделения».
Rahly
5
где путь к внешнему файлу, в котором мы берем строки?
абидинберкай
@ Шахта ТомашЗато - 100 метров. Я еще не проверял этот ответ ... Как вы к этому подошли? Ссылка на пример будет очень признательна! huanPastas, +1 за ответ!
gsamaras
2
@gsamaras Я точно не помню, но я использовал какой-то поток, который считывает данные по частям, а затем отправляет событие каждый раз, когда я сталкивался \n. Но с 100-метровыми строками вы столкнетесь с таблицей с отображением их в HTML.
Томаш Зато - Восстановить Монику
37

Используя ES6, javascript становится немного чище

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
источник
3
проголосовали за разделение строк с помощью регулярного выражения, что является правильным способом сделать это.
Мейсам Фегхи
13
Более \r?\n
простое
1
Отличный пример, и мне нравится, что обработаны окончания строк в стиле Windows и Unix. Спасибо.
Brad