实现读取本地json格式文件并解析

最新推荐文章于 2025-11-03 00:30:00 发布

原创最新推荐文章于 2025-11-03 00:30:00 发布 · 7.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json

web javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript的FileReader API来异步读取和解析本地的JSON格式文件，由于ActiveXObject不适用于现代浏览器，因此选择了更通用的FileReader方法。通过这个方法，可以从用户计算机上读取JSON文件内容，适用于Web应用程序。

javascript 作为前台交互最常用的语言，想必大家都已经很数据了，作为了一个前台和后台都倒腾的程序猿，最近一个朋友问我怎么用JavaScript实现读取本地json格式的文件，最为职业精神就帮他写了一个顺便和温习了一下知识点，送人玫瑰，手留余香，何乐而不为呢~

开始以为可以用ActiveXObject 来实现文件的读取但是 ActiveXObject 此对象为 Microsoft 扩展，仅在 Internet Explorer 中受支持，在 Windows 8.x 应用商店应用中不受支持。所以就FileReader 这个对象来实现文件的读取。

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.--来自官方网站，具体参考 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

具体实现代码如下

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob() {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = 0;
    var stop = file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        var content = evt.target.result;
        var objJson = JSON.parse(content);
        alert(objJson);
      }
    };
    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      readBlob();
    }
  }, false);
</script>

结果参见如下调试图片