JS简单实现读入JSON文件

2019/05/08 18:51
阅读数 24

首先要知道有这个两个东西:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。(不过要比较新的浏览器才支持)

JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

思路就是用FileReader 读入一个JSON字符串,然后用JSON.parse() 构造成对象。

window.onload = function() {
  let input = document.getElementById("data1");//得到上传按钮的对象
  //console.log(info);                         //测试用
  input.onchange = function() {                //给按钮的onchange写一个读取函数
    const file = this.files[0];                //其实是可以扩展到多文件上传的,不过我们就选第一个,也就是下标0
    if (!!file) {                              //!!是一个js的语法,表示后面的变量不是null/undefined/空串,实用写法。
      const reader = new FileReader();         //实例化一个FileReader对象
      reader.readAsText(file, "gbk");          //借助 FileReader 的方法,按照文本格式读入文件,第二个参数是编码方式(可空)
      reader.onload = function() {
        tmp1 = this.result;                      //然后在FileReader的onload方法里,然后在FileReader的onload方法里,刚刚读入的文件能以文本的形式得到了
        //注意这个对象还是文本,不能拿来直接用,但首先你可以把它带出来。
        //(不推荐也不反对用全局变量)
      };
    }
  };
  //...
};

下面你要得到JSON对象,那么很简单JSON.parse处理即可。

d1 = JSON.parse(tmp1);

参考

JSON.parse()

FileReader()

js中!和!!的区别及用法

JavaScript 中的FileReader对象(实现上传图片预览)

Html5 js FileReader接口

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部