98

I have a web page made by html+javascript which is demo, I want to know how to read a local csv file and read line by line so that I can extract data from the csv file.

litaoshen
  • 1,762
  • 1
  • 20
  • 36

2 Answers2

137

Without jQuery:

const $output = document.getElementById('output')
document.getElementById('file').onchange = function() {
  var file = this.files[0];

  var reader = new FileReader();
  reader.onload = function(progressEvent) {
    // Entire file
    const text = this.result;
    $output.innerText = text

    // By lines
    var lines = text.split('\n');
    for (var line = 0; line < lines.length; line++) {
      console.log(lines[line]);
    }
  };
  reader.readAsText(file);
};
<input type="file" name="file" id="file">
<div id='output'>
  ...
</div>

Remember to put your javascript code after the file field is rendered.

Teocci
  • 7,189
  • 1
  • 50
  • 48
sites
  • 21,417
  • 17
  • 87
  • 146
  • 32
    I have 200000 lines (not kidding, it's a log file). I don't think your solution covers that, nice try though. – Tomáš Zato Oct 23 '15 at 15:16
  • Also, this solution doesn't handle if that return(line feed) is within a quoted field. As for Tomas, if you have a more advanced browser, you could use a generator to read line by line without doing a "split". – Rahly Dec 11 '15 at 13:12
  • 8
    where is the path for external file in which we take lines? – abidinberkay Apr 12 '16 at 09:13
  • @TomášZato mine is 100m lines. I haven't tested that answer yet though.. How did you approach that? A link to an example would be super-appreciated! huanPastas, +1 for the answer! – gsamaras Sep 06 '16 at 03:36
  • 2
    @gsamaras I don't remember exactly but I used some stream that reads data piece by piece and then emmited event for every time I encountered `\n`. But with 100m lines, you're gonna run into table with displaying them in HTML. – Tomáš Zato Sep 06 '16 at 07:58
  • I've been looking everywhere for a way to do this and this is exactly what I needed. God bless your soul. – rpalo Jan 06 '17 at 22:56
  • Can we read a file onload of the script without input tag solely in javascript if we provide the file path in it ? – Adarsh Singh Jan 16 '20 at 12:31
  • @TomášZato-ReinstateMonica In fact, I just ran this script on a 60.000.000+ line file, and it was perfectly smooth :) Longest part was the upload. – zessx Oct 05 '20 at 13:45
  • @zessx I actually once wrote a generator function that does not split the original string and serves lines one after another, but I cannot find it. – Tomáš Zato Oct 05 '20 at 16:29
46

Using ES6 the javascript becomes a little cleaner

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
  • 14,627
  • 23
  • 80
  • 126