HTLM5文件直接输入浏览器缓存(无上传/服务器)

时间:2017-10-20 01:14:28

标签: javascript json html5

我想允许用户将自己的首选项导入/导出为小(Json)文件;验证完成后,我会将LocalStorage中已存储的值替换为文件中的值。

考虑到很多此HTML5 File Input功能概念演示模型使用图片并允许在实际上传之前在浏览器中预览它们!如果浏览器可以读取和渲染图像,那么它肯定可以读取我的30行Json小文件,对吧?那是完全我想要做的事情。

我不需要Web服务器,我希望文件一直留在客户端;我怎么能这样做?

1 个答案:

答案 0 :(得分:2)

您可以使用FileReader这样读取文件,

<input type='file' accept='text/plain' onchange='openFile(event)'>

var openFile = function (event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function () {
        var text = reader.result;
        obj = JSON.parse(text);
        obj_database = JSON.parse(localStorage.getItem("..."));
        //change obj_database
        localStorage.setItem("...", JSON.stringify(obj_database));
        //print success msg
    };
    reader.readAsText(input.files[0]);
};