用途
新着
履歴
分類

HTML5 ローカルのCSVを読み込み加工する

HTML5 ローカルのCSVを読み込み加工する
HTML5 ローカルのCSVを読み込み加工する
ローカルにあるファイルをHTML5で実装されたFileAPIを使って読み込み表組を作成するサンプルです。

HTML5というもののHTMLは以下の二行で、他はJavaScriptになります。

また、以下のサンプルはjQueryも利用しています。

まずはinputするボタンを設置します。

上記のボタンを押してCSVファイルを取り込みます。(ファイルはサーバにアップロードはされません。)

HTMLはこちら。

<input type="file" name="select" id="demo_btn">

<div id="demo_result"></div>

読み込ませるCSVのサンプルとして以下のようなファイルを想定しています。

ID,種類,商品,金額,評価
1,PC周辺,マウス,5000,A
2,PC周辺,マウス,6000,B
3,PC周辺,キーボード,2500,B
4,PC周辺,キーボード,8000,A

JSは以下のようになります。

// 読み込みボタンがchangeになったら実行
var read_btn = document.querySelector("#demo_btn");
read_btn.addEventListener("change", file_read, false);

function file_read(event) {

    // 読み込まれたファイルの情報をセット
    var file = event.target.files[0];
    var type = file.type;  //winの場合text/csvにならない場合があるため名前でチェック
    var name = file.name;
    var pattern = '.csv';

    // csvファイルのチェック
    if(name.indexOf(pattern) > -1){
        // readerオブジェクトを作成
        var reader = new FileReader();
        // ファイル読み取り
        reader.readAsText(file);

        // 読み込まれたファイルデータを渡す
        reader.onload = function(e) {
            make_view(e.target.result);
        };

        // 読み込みに失敗した場合
        reader.onerror = function() {
            alert("ファイルが読み取れません");
        };
    }
}



//csvデータでHTMLを組む
function make_view(csvdata) {

  //改行ごとに配列にする
  var tmp = csvdata.split("\n");

  //結果を格納するHTMLの開始
  var result_html = '< div id="demo_data" >';

  // カンマを分解する
  var data = [];
  for (var i = 0; i < tmp.length; i++) {

    //1行ずつカンマ区切りで配列にし、新たに配列に入れる
    data[i] = tmp[i].split(",");

    //HTMLを整形する
    result_html += "< ul >";
    for (var j = 0; j < data[i].length; j++) {
      result_html += "< li >" + data[i][j] + "";
    }
    result_html += "< /ul >";
  }

  //結果を格納するHTMLを閉じる
  result_html += "< /div >";

  //指定のIDへ要素を挿入する
  $("#demo_result").append(result_html);

}
公開 2020-07-19 16:09:09
更新 2020-08-10 23:33:01
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top