位置: IT常识 - 正文
JS原生读取 本地 JSON(原生js获取document)
编辑：rootadminJS原生读取 本地 JSON 开发期间可能会遇到需要读取的JSON以文件形式储存在本地的情况当用户可以手动选择文件时：
本文链接地址:https://www.jiuchutong.com/zhishi/298447.html
转载请保留说明！
推荐整理分享JS原生读取 本地 JSON(原生js获取document)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js读取本地文件内容并写入,js读取本地html文件,原生js读取json文件,原生js读取json文件,js原生读取本地文件,js读取本地文件内容并写入,原生js读取json文件,原生js读取json文件,内容如对您有帮助，希望把文章链接给更多的朋友！
这个情况就很常见也很好解决了，我们可以使用类型为file的input标签。
假设我们有一个ID为“fileInput”、类型为“file”的input标签。
<input type="file" id="fileInput" />那么JS代码就可以这样写：
首先，获取到页面中input标签的DOM元素
let inputDOM = document.getElementById("fileInput");然后获取这个DOM元素中用户所上传文件的文本内容
let fileText = inputDOM.files[0];接着，新建一个FileReader对象
let reader = new FileReader();将刚刚获取到的文件内容放入新建的reader，并指定文件所使用的编码方式
reader.readAsText(fileText,"UTF-8"); 注意，FileReader是一个异步运行的API在reader工作完成后，运行一些代码，将读取到的内容“丢”出来
reader.onload = function(){ //这里的代码将在FileReader完成工作之后运行}这个匿名函数内可以这样写：
获取FileReader读取的结果
let content = reader.result;//这里也可以简写FileReader的名字为“this”let content = this.result;用JSON.parse把结果转换为JSON对象
let JSONobject = JSON.parse(this.result);把提取到的JSON对象赋值给在合适位置
上一篇：使用vite 搭建vue 3的项目(vite搭建vue3)
下一篇：超全人工智能 AI工具导航网站合集(人工智能agi)