JS简单实现读入JSON文件

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

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

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接口