JavaScriptのFileReader.readAsText()でCSVをインポートしてテーブルで表示

// ファイルのinput要素を取得
var inputElement = document.getElementById('inputFile');

// ファイルが選択されたときのイベントリスナーを設定
inputElement.addEventListener('change', function() {
  // 選択されたファイルを取得
  var file = this.files[0];

  // FileReaderのインスタンスを作成
  var reader = new FileReader();

  // ファイルの読み込みが終了したときのイベントリスナーを設定
  reader.onload = function(e) {
    // ファイルの内容をテキストとして取得し、コンソールに表示
    console.log(e.target.result);
  };

  // ファイルをテキストとして読み込む
  reader.readAsText(file);
});

<div class="csvFileWrapper">
<input type="file" id="csvFile" accept=".csv">
</div>
<button onclick="generateTable()">テーブルを生成</button>
<div id="output"></div>

// 関数generateTableを定義します。この関数はCSVファイルをHTMLのtable形式に変換します。
function generateTable() {
  // 'csvFile'というidを持つ要素(ここではファイルを選択するinput要素)を取得します。
  var fileInput = document.getElementById('csvFile');
  // 選択されたファイルのリストから最初のファイルを取得します。
  var file = fileInput.files[0];
  // FileReaderオブジェクトを生成します。これによりファイルの読み込みを行うことができます。
  var reader = new FileReader();

  // ファイルの読み込みが完了したときに呼び出されるイベントハンドラを設定します。
  reader.onload = function(e) {
    // ファイルの内容をテキストとして取得します。
    var contents = e.target.result;
    // ファイルの内容を改行('\n')で分割し、各行を要素とする配列を作成します。
    var lines = contents.split('\n');
    // HTMLのtable要素を新規に作成します。
    var table = document.createElement('table');
    // 各行について処理を行います。
    for (var i = 0; i < lines.length; i++) {
      // HTMLのtr要素(テーブルの行)を新規に作成します。
      var row = document.createElement('tr');
      // 行をカンマ(',')で分割し、各セルを要素とする配列を作成します。
      var cells = lines[i].split(',');
      // 各セルについて処理を行います。
      for (var j = 0; j < cells.length; j++) {
        // HTMLのtd要素(テーブルのデータセル)またはth要素(テーブルのヘッダーセル)を新規に作成します。
        // ここでは、最初の行(i === 0)のセルをth要素とし、それ以外のセルをtd要素としています。
        var cell = document.createElement(i === 0 ? 'th' : 'td');
        // セルのテキスト内容を設定します。
        cell.textContent = cells[j];
        // 作成したセルを行に追加します。
        row.appendChild(cell);
      }
      // 作成した行をテーブルに追加します。
      table.appendChild(row);
    }
    // 'output'というidを持つ要素の内容を空にします。
    document.getElementById('output').innerHTML = '';
    // 作成したテーブルを'output'というidを持つ要素に追加します。
    document.getElementById('output').appendChild(table);
  };

  // 選択されたファイルをテキストとして読み込みます。
  // 読み込みが完了すると上で設定したonloadイベントハンドラが呼び出されます。
  reader.readAsText(file);
}

.csvFileWrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}