ローカルファイル(テキスト)内容を取得して表示する

投稿日：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);
}