- 投稿日：2022年02月28日 21時11分31秒
- 更新日：2022年03月03日 09時32分10秒
ローカルファイル(テキスト)内容を取得して表示する
デモ
説明・補足・注意事項
ボタンをクリックしてファイルを選択すると、ファイルの内容（テキスト）が表示されます。
画像ファイルなどを指定すると…
Get_importCSV(filepath, callbackFunc)
function Get_importCSV(filepath, callbackFunc) {
console.log('start[Get_importCSV]');
// File APIを利用できるかをチェック
if (!window.File) {
alert('The File APIs are not fully supported in this browser.');
}
// ファイル読み込みの準備
var reader = new FileReader();
// ファイルの読み込みに成功したら、その内容をコールバック関数に投げる
reader.addEventListener('load', function(e) {
callbackFunc(reader.result);
}, true);
// ファイルの内容をテキストとして取得
reader.readAsText(filepath, 'UTF-8');
}引数
第一引数はdocument.querySelecter(‘input[type=file]’).files[idx]を想定。
第二引数はCSVファイルの内容を受け取ってから動く関数を指定します。
説明
FileReaderはローカルファイルを非同期に読み取るオブジェクトです。
まずオブジェクトをnewキーワードを使って作成します。
var reader = new FileReader();そして作成したFileReaderのインスタンスにloadイベントが発生したとき、Get_importCSV関数の引数であるcallbackFuncへ読み込んだテキストを渡すというイベントリスナを作成します。
reader.addEventListener('load', function(e) {
callbackFunc(reader.result);
}, true);< /code>後はFileReaderのインスタンスに引数のファイル内容の読み込みを開始します。
reader.readAsText(filepath, 'UTF-8');詳細
使い方
指定したファイルがCSVで、それをtableタグとして出力したい場合はこんな感じ。
/**
* Get_importCSV関数実行後のコールバック関数
* ファイル内容を受け取って処理する
* @param {*} val_data
*/
function Set_importData(val_data){
console.log("start[Set_importData]");
// 既にテーブルが存在する場合は消す
var elem_table = document.querySelector("table");
if(elem_table != null){
elem_table.remove();
}
var elem_table = document.createElement("table");
elem_table.appendChild(document.createElement("thead"));
elem_table.appendChild(document.createElement("tbody"));
var elem_tableParent = document.querySelector("body");
elem_tableParent.appendChild(elem_table);
// 形式："[値]","[]",…,"[]"
// 一行目を取得
var text = val_data.replace(/\"\r\n|\"\r/g, "\"\n");
var lines = text.split( '\"\n' );
// 項目名
var elem_tableHead = document.querySelector("table > thead");
var headItemns = lines[0].split( '\",\"' ); // 一行目が項目名
mentCtrl_importCSV.Set_importData_tr(elem_tableHead, headItemns, true); // 追加
// 実データ
var elem_tableBody = document.querySelector("table > tbody");
for(var lineIdx = 1; lineIdx <= lines.length - 1; lineIdx++){
if(lines[lineIdx].trim() == ""){
continue;
}
var dataItems = lines[lineIdx].split( '\",\"' );
mentCtrl_importCSV.Set_importData_tr(elem_tableBody, dataItems);
}
}
/**
* Set_importDataの処理の一行ずつ追加する処理
* @param {*} elem_parent
* @param {*} val_Items
* @param {*} flg_head
*/
function Set_importData_tr(elem_parent, val_Items, flg_head = false){
var createElem_tr = document.createElement("tr");
// 項目のタグ名を判定
var itemElemName = "";
if(flg_head == false){
itemElemName = "td";
}else{
itemElemName = "th";
}
for(var item of val_Items){
var elem_item = document.createElement(itemElemName);
// 先頭・末尾に"があれば消す
if(item.charAt(0) == '\"'){
item = item.slice(1);
}
if(item.charAt(item.length - 1) == '\"'){
item = item.slice(0, -1);
}
elem_item.innerText = item.trim() ;
createElem_tr.appendChild(elem_item);
}
elem_parent.appendChild(createElem_tr);
}最後に
全てのブラウザでサポートされているわけではないみたいですが、現状ほぼ大丈夫でしょう。
他システムやDBからデータを持ってくるときやExcelなどでまとめて編集したものを反映させたい時「CSVを取り込みたい！」と思うことは多いです。
ただ大量データを一回でやろうとするとout of memoryが出るので、ファイルサイズは注意してください。