<!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 でエクスポートします