input type:fileで読み込んだjsonファイルをJavaScriptで処理したい。

Question

##実現したいこと
input type:fileで読み込んだjsonファイルをJavaScriptで処理したい。

###ソースコード

$('#upfile').change(function(){
  if (this.files.length > 0) {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
            var data;//dataにjsonのデータを入れたい。
        }
    }
});

##知りたいこと
reader.resultがDataURIなので、DataURIからJsonファイルを読み込む方法が知りたいです。
もしくはほかに方法があれば、HTML,JavaScriptでローカルから読み込んだJsonファイルをJavaScriptで処理する方法が知りたいです。

Answer 1

DataURI Scheme を解析するユーザ関数があれば対応できそうですね。

• CODEPEN parseDataURL()

 var file = this.files[0];
 var reader = new FileReader();
 reader.onload = function(event) {
    console.log( event.target.result );
    var parsed = parseDataURL(event.target.result); //dataにjsonのデータを入れたい。
    var json;
    try {
      json = JSON.parse( parsed.isBase64
        ? bota(parsed.data)
        : decodeURIComponent(parsed.data)
      );
    } catch(e) {
      // DataURLはJSONでなかった場合（ノーテーションのミスなど）
    };
    console.log( json );
 }
 reader.readAsDataURL(file);

---

JavaScriptは非同期処理ですので、イベントリスナでコールバック指定する実装の場合、
先にイベントリスナをアタッチしておくほうが安全と思います。

1. 活用するオブジェクトのインスタンス生成 reader = new FileReader()
2. イベントリスナ（読み込み完了後の処理）の定義 reader.onload = listener
3. 読み込み開始メソッド実行（処理開始のトリガ） reader.readAsDataURL()

※ご質問のコードでは 1. 3. 2. の順に実行されています。
ブラウザ実装では問題ないように処理されていると思いますが、「読み込み完了後にイベントリスナを定義する事例」を想像できてしまう内容であり、不安が感じられます。

Comments

[WrongAccept]

var parseDataURL = function( dataURL ){
var rslt = {
mediaType : null,
encoding : null,
isBase64 : null,
data : null
};
if( /^data:([^;]+)(;charset=([^,;]+))?(;base64)?,(.*)/.test( dataURL ) ) {
rslt.mediaType = RegExp.$1 || 'text/plain';
rslt.encoding = RegExp.$3 || 'US-ASCII';
rslt.isBase64 = String(RegExp.$4) === ';base64';
rslt.data = RegExp.$5;
}
return rslt;
}
$('#upfile').change(function(){
if (this.files.length > 0) {
// 選択されたファイル情報を取得
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(event) {
console.log( event.target.result);
var parsed = parseDataURL(event.target.result); //dataにjsonのデータを入れたい。
var json;
try {
json = JSON.parse( parsed.isBase64? bota(parsed.data): decodeURIComponent(parsed.data));
} catch(e) {};
console.log(json);
}
reader.readAsDataURL(file);
}
});
こういった感じでいいのでしょうか…(logにDataURIとunderfindが出てしまい…)

[AkitoshiManabe]

console.log(json) が undefined になる原因は いくつも考えられます。
parseDataURL() の引数に渡す値が ユーザ関数内の正規表現にマッチしなかったことだけは確実ですので、console.log( event.target.result )の結果が「正しいDataURISchemeのフォーマットなのか」を確認してください。
dataURL のフォーマットに問題ないが、parseDataURL() 内の正規表現でマッチしないのであれば、正規表現を書き換えて対応する必要があります。

[WrongAccept]

遅れてすみません…
どうやらparsed.dataまではちゃんとDataURIを拾ってきてくれるんですが、JSON.parse()のところでUncaught SyntaxErrorが出てしまっているみたいです…
parse.dataにはWw0KC...==が入っています。
event.target.resultはdata:application/json;base64,Ww0KC...==なのでおそらくあってるんですが

[WrongAccept]

json=JSON.parse(atob(parsed.data))
にしたらいけました！！