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

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ローカルに保存してあるJSONを読込む</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>
  8. <script type="text/javascript">
  9.   function ViewModel() {
  10.     var self = this;
  11.     self.loadFile = ko.observable();
  12.     self.localFile = function(a, b) {
  13.       var fileList = b.target.files;
  14.       
  15.       var reader = new FileReader();
  16.       
  17.       // ファイル読み込み完了時
  18.       reader.onload = function(){
  19.         var r = "";
  20.         try {
  21.           // JSONに変換
  22.           var obj = $.parseJSON(reader.result);
  23.           r = "「$.parseJSON(reader.result)」を実行すればオブジェクトに変換してくれる";
  24.         }
  25.         catch (e) {
  26.           // JSONではないファイルを読込んだとき
  27.           r = "JSONじゃない";
  28.         }
  29.         
  30.         a.loadFile(r);
  31.       }
  32.       
  33.       // ファイルの読み込み
  34.       reader.readAsText(fileList[0], "utf-8");
  35.       // reader.readAsText(fileList[0]); // 文字コードの指定がなくても大丈夫かも。
  36.     };
  37.   }
  38.   $(document).ready(function () {
  39.     ko.applyBindings(new ViewModel());
  40.   });
  41. </script>
  42. <style type="text/css"></style>
  43. </head>
  44. <body>
  45. <h1>ローカルに保存してあるJSONを読込む</h1>
  46. 適当なJSONファイルがなければ右のファイルを保存して試す「<a href="//tips.recatnap.info/sample/testdata/testdataB.txt">JSONファイルのサンプル</a>」
  47. <div style="padding:1em 0;">
  48. <input type="file" data-bind="event: {change: localFile}" />
  49. </div>
  50. ▼読込んだファイルを表示
  51. <div style="padding:0.5em;border:1px solid #ccc; background:#f5f5f5;" data-bind="text: loadFile"></div>
  52. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  53. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  54. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  55. </div>
  56. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  57. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  58. </div>
  59. </body>
  60. </html>