「ローカルに保存してあるCSVを読込む」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

ローカルに保存してあるCSVを読込む

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ローカルに保存してあるCSVを読込む</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   jQuery.extend({
  11.     csv: function(delim, quote, lined) {
  12.       delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
  13.       quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
  14.       lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;
  16.       function splitline (v) {
  17.         // Split the line using the delimitor
  18.         var arr  = v.split(delim), out = [], q;
  19.         for (var i=0, l=arr.length; i<l; i++) {
  20.           if (q = arr[i].match(quote)) {
  21.             for (j=i; j<l; j++) {
  22.               if (arr[j].charAt(arr[j].length-1) == q[0]) {
  23.                 break;
  24.               }
  25.             }
  26.             var s = arr.slice(i,j+1).join(delim);
  27.             out.push(s.substr(1,s.length-2));
  28.             i = j;
  29.           }
  30.           else {
  31.             out.push(arr[i]);
  32.           }
  33.         }
  35.         return out;
  36.       }
  38.       return function(text) {
  39.         var lines = text.split(lined);
  40.         for (var i=0, l=lines.length; i<l; i++) {
  41.           lines[i] = splitline(lines[i]);
  42.         }
  43.         
  44.         // 最後の行を削除
  45.         var last = lines.length - 1;
  46.         if (lines[last].length == 1 && lines[last][0] == "") {
  47.           lines.splice(last, 1);
  48.         }
  49.         
  50.         return lines;
  51.       };
  52.     }
  53.   });
  55.   function ViewModel() {
  56.     var self = this;
  58.     self.loadFile = ko.observable();
  60.     self.localFile = function(a, b) {
  61.       var fileList = b.target.files;
  62.       
  63.       var reader = new FileReader();
  64.       
  65.       // ファイル読み込み完了時
  66.       reader.onload = function(){
  67.         var obj = $.csv(",", "", "\n")(reader.result);
  68.         a.loadFile(obj);
  69.       }
  70.       
  71.       // ファイルの読み込み
  72.       reader.readAsText(fileList[0], "utf-8");
  73.       // reader.readAsText(fileList[0]); // 文字コードの指定がなくても大丈夫かも。
  74.     };
  75.   }
  77.   $(document).ready(function () {
  78.     ko.applyBindings(new ViewModel());
  79.   });
  80. </script>
  82. <style type="text/css"></style>
  84. </head>
  85. <body>
  87. <h1>ローカルに保存してあるCSVを読込む</h1>
  89. 適当なJSONファイルがなければ右のファイルを保存して試す「<a href="//tips.recatnap.info/sample/testdata/testdataB.txt">JSONファイルのサンプル</a>」
  90. <div style="padding:1em 0;">
  91. <input type="file" data-bind="event: {change: localFile}" />
  92. </div>
  94. ▼読込んだファイルを表示
  95. <div style="padding:0.5em;border:1px solid #ccc; background:#f5f5f5;" data-bind="foreach: loadFile">
  96. <p data-bind="text: $data[0]"></p>
  97. </div>
  99. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  100. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  101. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  102. </div>
  104. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  105. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  106. </div>
  108. </body>
  109. </html>