Javascriptを使用してローカルテキストファイルを読み取り、行ごとに読み取る方法は?


83

デモであるhtml + javascriptで作成されたWebページがあります。ローカルのcsvファイルを読み取り、csvファイルからデータを抽出できるように1行ずつ読み取る方法を知りたいです。


2
これをチェックしてください html5rocks.com/en/tutorials/file/dndfiles–
Hunter Larco

2
ブラウザの互換性要件はありますか?具体的には、IE9以下をサポートしていますか?
愛されていない2014


@HunterLarcoありがとうございます。問題は、結果から各行を取得する方法がわからないことです。つまり、reader.readAsText()は、1行
ずつ

@LukeMcGregor要件はありません。現在のバージョンをサポートするだけで、問題ありません。
litaoshen 2014

回答:


115

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コードを配置することを忘れないでください。


19
私は200000行あります(冗談ではなく、ログファイルです)。私はあなたの解決策がそれをカバーしているとは思いませんが、いい試みです。
トマシュザト-モニカを復活させる2015年

また、このソリューションは、そのreturn(改行)が引用符で囲まれたフィールド内にある場合は処理しません。Tomasに関しては、より高度なブラウザーを使用している場合は、ジェネレーターを使用して、「分割」を行わずに1行ずつ読み取ることができます。
Rahly 2015

5
行を取る外部ファイルのパスはどこにありますか?
abidinberkay 2016

@TomášZato鉱山は100mラインです。私はまだその答えをテストしていません。どのようにそれにアプローチしましたか?例へのリンクは非常に高く評価されます!huanPastas、答えは+1!
gsamaras 2016

2
@gsamaras正確には覚えていませんが、データを1つずつ読み取るストリームを使用し、遭遇するたびにイベントを送信しました\n。しかし、100mの行では、HTMLで表示してテーブルにぶつかります。
トマシュザト-モニカを復活させる2016年

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

3
それを行う正しい方法である正規表現を使用した分割行に投票しました。
Meysam Feghhi 2017年

12
シンプルな正規表現:\r?\n
ceving

1
優れた例です。WindowsおよびUnixスタイルの行末が処理されるのが大好きです。ありがとうございました。
ブラッド
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.