Question

我正在尝试访问使用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
            }
        }        
    }
};

谢谢大家的帮助。

Answer 1

JSON解析有效，真的吗？ e.target.result是一个BLOB - JSON.parse如何解析这个？更不用说您的JSON文件不是真正的JSON :)

使用readAsText(f, 'UTF-8')代替readAsDataURL，并输入（真实）JSON（删除前导JSONExample =和尾随;）。

我认为我改变了小提琴...我不习惯随机网页上的每个人写访问权限:)）

编辑：好的，也许我没有更新文件 - 不知道我能否。只需进行我提到的更改，并且您的示例“几乎没有JSON”中没有“cinempa.png”键，所以也要修复它。

使用HTML5 File API从本地选择的JSON对象访问数据

1 个答案: