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 =和尾随;）。

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

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

于 2013-02-07T12:04:56.433 回答