ファイルの読込み

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
 
<script>
function test(event) {
 
    console.dir(event);
 
    // ファイルオブジェクト
    var file = event.target.files[0];
 
    // file.name でファイル名
 
    // ファイルを読み込む為のオブジェクト
    var reader = new FileReader();
 
    // ファイルが読込み完了時に行う処理をイベントとして登録
    reader.onload = function(reader_event) {
        document.getElementById("text").value = reader_event.target.result;
    };
 
    // イベントを開始させるメソッド( shift_jis という前提で第二引数を指定 )
    reader.readAsText(file,"shift_jis");
 
}
</script>
 
</head>
<body>
<h1>ファイルの読込み</h1>
 
<input type="file" id="btn" value="参照" onchange="test(event)">
<div>
<textarea id="text" style='width:90%;height:400px;'></textarea>
</div>
 
</body>
</html>

ファイルの読込み部分

1) type="file" による input 要素で取得したローカルファイルのオブジェクトが必要

// ファイルオブジェクト
var file = event.target.files[0];
 
// ファイルを読み込む為のオブジェクト
var reader = new FileReader();
 
// ファイルが読込み完了時に行う処理をイベントとして登録
reader.onload = function(reader_event) {
        document.getElementById("text").value = reader_event.target.result;
};
 
// イベントを開始させるメソッド( shift_jis という前提で第二引数を指定 )
reader.readAsText(file,"shift_jis");

▼ MDN のドキュメント

FileReader
FileReader.readAsText()

★ 改造

キャラクタセットを無条件に shift_jis にしているので、コンボボックスで変更可能にする必要があります

キャラクタセットの選択

キャラクタセットの選択 <select id="charset">
<option value="shift_jis">SHIFT_JIS</option>
<option value="utf-8">UTF-8</option>
</select>

ロードテスト用の csv データの作成

▼ SQLの窓でデータを csv でエクスポートします