JavaScriptでファイルの内容を読み込んで出力したい

Question

サーバにcsvファイルをアップロードし、ボタン押下で読み込み、改行コードを含む１行の文字列にしてコンソールに出力したいです。

いろいろなサイト等見てますが、うまくいきません、、、

<input type="file" id="file" accept=".csv"/>
<input type="button" value="CSV取込" onclick="btnClick()"/>

function btnClick() {
    var csvfile = document.getElementById('file').onchange = function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function(progressEvent){
            var result = reader.readAsText(file);
            console.log(result);
        };
    };
}

ご教授いただけますでしょうか。

Comments

[m.ts10806]

> いろいろなサイト等見てますが、うまくいきません、、、
どのようなサイトを見たのか質問本文に追記してください。
「うまくいかない」は誰にも何も伝わらない表現です。起きている現象をきちんと具体的に記載してください。
https://teratail.com/help/question-tips#questionTips3-4

Answer 1

改行コードを含む１行の文字列

それは複数行の文字列なのでは？

ファイルを選んだときにfilereaderで読み込みコンソールに出力していいならこう

<script>
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#file').addEventListener('change',function(e){
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.addEventListener('load',function(e){
      var result = e.target.result
      console.log(result);
    });
    reader.readAsText(file, "utf-8");
  });
});
</script>
<input type="file" id="file">