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);