6

ユーザーがそのコンピューターで JSON ファイルを選択できるようにしたいのですが、この JSON ファイルをクライアント側の Javascript で使用できるようにする必要があります。

FILE APIを使用してこれを行うにはどうすればよいですか。最終的な目標は、ユーザーが選択したJSONファイルをオブジェクトとして使用できるようにすることです。これをJavascriptで操作できます。これは私がこれまでに持っているものです:

JsonObj = null 



function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
     f = files[0];
      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         JsonObj = e.target.result
         console.log(JsonObj);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }



document.getElementById('files').addEventListener('change', handleFileSelect, false);

フィドル: http://jsfiddle.net/jamiefearon/8kUYj/

変数 JsonObj を適切な Json オブジェクトに変換するにはどうすればよいですか。新しいフィールドなどを追加できます。

4

1 に答える 1

11

を介して「DataUrl」としてデータをロードしないでくださいreadAsDataURL。代わりに、使用readAsTextしてから解析しますJSON.parse()

例えば

JsonObj = null 

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
     f = files[0];
      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         JsonObj = JSON.parse(e.target.result);
         console.log(JsonObj);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsText(f);
    }

document.getElementById('files').addEventListener('change', handleFileSelect, false);
于 2013-07-22T05:50:04.420 に答える