FileAPI と、jquery.csv を使って csv を表示する #jQuery

実行結果

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
<script src="csv_convert.js"></script> 
<script src="list_to_table.js"></script> 
<link rel="stylesheet" href="table.css">
<title>CSV ファイルの読み込みと表示</title>
</head>
<body>
<h2>jquery-csv</h2>
<input type="file" id="getfile" accept="text/csv">
<p />

<pre id="preview" ></pre>
<p />
<div id="contents"></div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Dec/07/2021<p />
</body>
</html>

csv_convert.js

// -------------------------------------------------------------------
//  csv_convert.js
//
//                  Dec/07/2021
// -------------------------------------------------------------------
jQuery (function ()
{
    jQuery("#outarea_aa").text ("*** csv_convert.js *** 開始 ***")

    var file = jQuery('#getfile')[0]

    change_monitor (file)

    jQuery("#outarea_hh").text ("*** csv_convert.js *** 終了 ***")

})

// -------------------------------------------------------------------
function change_monitor (file)
{
    file.onchange = function ()
    {
    const fileList = file.files
    var reader = new FileReader()
    reader.readAsText(fileList[0])

    reader.onload = function ()
        {
        csv_convert_proc (reader.result)
        }
    }

}

// -------------------------------------------------------------------
function csv_convert_proc (str_in)
{
    jQuery('#outarea_bb').text("*** csv_convert_proc *** start ***")
    jQuery('#preview').text(str_in)

    // build HTML table data from an array (one or two dimensional)
    var data = jQuery.csv.toArrays(str_in)

    var html = list_to_table_proc(data)

    jQuery('#contents').html(html)
}

// -------------------------------------------------------------------

list_to_table.js

// -------------------------------------------------------------------
//  list_to_table.js
//
//                  Jun/30/2017
// -------------------------------------------------------------------
    // build HTML table data from an array (one or two dimensional)
function list_to_table_proc(data)
{
      var html = '';

      if(typeof(data[0]) === 'undefined') {
        return null;
      }

      if(data[0].constructor === String) {
        html += '<tr>\r\n';
        for(var item in data) {
          html += '<td>' + data[item] + '</td>\r\n';
        }
        html += '</tr>\r\n';
      }

      if(data[0].constructor === Array) {
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
      }

      if(data[0].constructor === Object) {
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + item + ':' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
      }

    return html;
}

// -------------------------------------------------------------------

table.css

/* -------------------------------------------------------------- */
/*
    table.css
*/
/* -------------------------------------------------------------- */
table,td,th {
table-layout:fixed;
border:1px #ff00ff solid;
}

/* -------------------------------------------------------------- */

jquery-3.6.0.min.js で動作を確認しました。