0

HTML 5 API を使用してローカルで選択された JSON オブジェクトにアクセスしようとしています。これまでの私のコードは次のとおりです。

HTML

<input type="file" id="files" name="files[]" />

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);
            var parsedJSON = JSON.parse(JsonObj);
            var x = parsedJSON['frames']['chaingun.png']['spriteSourceSize']['x'];
            console.log(x);

        };
    })(f);

    // Read in JSON as a data URL.
    reader.readAsDataURL(f);
}

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

ここでフィドル： http://jsfiddle.net/jamiefearon/8kUYj/11/

したがって、ユーザーは で表される Json ファイルを選択しますJsonObj。テストするために、コンソールに出力する Json オブジェクトを評価しました: parsedJSON['frames']['chaingun.png']['spriteSourceSize']

コンソールの Chrome で次のエラーが表示されます。

fiddle.jshell.net:33Uncaught SyntaxError: Unexpected token ILLEGAL
(anonymous function)fiddle.jshell.net:33

参考までに、私が使用しているJsonファイルは次のとおりです。

JSONExample = {
    "frames": {
        "chaingun.png": {
            "frame": {
                "x": 1766,
                "y": 202,
                "w": 42,
                "h": 34
            },
            "rotated": false,
            "trimmed": true,
            "spriteSourceSize": {
                "x": 38,
                "y": 32,
                "w": 42,
                "h": 34
            },
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        }        
    }
};

ご協力ありがとうございました。

4

1 に答える 1

2

JSON 解析は本当に機能しますか? e.target.result は BLOB です - どうすれば JSON.parse でこれを解析できますか? JSONファイルが実際にはJSONではないことは言うまでもありません:)

readAsText(f, 'UTF-8')の代わりに使用readAsDataURLし、入力 (実際の) JSON を作成します (先頭JSONExample =と末尾の を削除します;)。

フィドルを変更したと思います...ランダムなWebページで全員の書き込みアクセスに慣れていません:)

編集：さて、ファイルを更新しなかったのかもしれません-できるかどうかわかりません。私が言及した変更を加えるだけで、例の「ほぼJSON」に「cinempa.png」キーがないため、それも修正してください。

于 2013-02-07T12:04:56.433 に答える