JavaScript FileReaderを使ってCSVファイルを読み込むサンプル
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122
構文
1.type fileの要素を取得する
let 変数名 = document.getElementById(“ファイルセレクタID");
2.addEventListenerのイベント登録
変数名.addEventListener('change’, (e) => {
let 変数名 = new FileReader();
ファイルを読み込み
read.readAsText(file);
3.ファイルの内容を表示
read.onload = function(){
要素.textContent = read.result;
}
使用例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSVファイルを読み込むサンプル</title> </head> <script> window.onload = function () { // type型のfileの要素を取得 let tf = document.getElementById("dp"); // 表示用の要素を取得 let objs= document.getElementsByClassName('cft')[0]; tf.addEventListener('change', (e) => { const target = event.target; const files = target.files; const file = files[0]; let read = new FileReader(); // ファイルの内容を表示 read.readAsText(file); read.onload = function() { objs.textContent = read.result; }; read.onerror = function() { // ファイルの読み込みを失敗する場合 console.log(read.error); }; }); } </script> <body> <h2>ファイルの内容:<span class="cft"></span></h2> <form> <input type="file" id="dp" accept=".csv"> </form> </body> </html>
実行結果
「ファイルを選択」ボタンを押して「test01.csv」を選択します。
画面に「ファイルの内容:yamada,20,tokyo」が表示されます。