javascript - 从上传的文件中加载 json

Question

我有文件输入和提交按钮。将上传的文件包含需要在 View 中加载的json(图形显示)。我不需要存储文件，只需将其可视化即可。

有没有办法只使用 jquery、javascript 或 Angular 来做到这一点？该应用程序作为静态内容包含在 Spring 应用程序中，但也必须作为独立应用程序运行。

实际上，我可以从服务器加载文件或向休息端点发出请求，但我需要添加选项来加载包含 json 数据的本地文件。

提前致谢

Answer 1

这适用于 IE >= 10。请注意，没有实现错误处理。我将把它留给你;)

HTML:

<input type="file" id="file" name="file">
<button type="submit" id="button">Click!</button>

JS(jQuery):

$('#button').on('click', function() {
    var reader = new FileReader();
    var file = $('#file').get(0).files[0];
    reader.onload = function(e) {
        console.log(JSON.parse(e.target.result));
    };
    reader.readAsText(file);
});