Question

我的本地计算机上有一个JSON文件，我想阅读其内容并使用纯javascript 在网络浏览器上显示。任何涉及服务器端的东西都不适用于我。它必须完全在客户端完成。有哪些可能的解决方案？注意：不应使用ajax和与之相关的任何内容。

Answer 1

如果您不想ajax加载文件，并让用户选择<input type='file' />要加载的文件，也许这种方式适合您。

document.getElementById('show').addEventListener('click', function() {
  
  var file = document.getElementById('myfile').files[0];
  var reader = new FileReader();
  reader.readAsText(file, 'UTF-8');
  reader.onload = function(evt) {
    document.getElementById('content').innerHTML = evt.target.result;
  }
  
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="file" name="" id="myfile">
  
  <div id="content"></div>
  <button id="show">Show</button>
</body>
</html>

Answer 2

function readFile(file) {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) {
            if(rawFile.status === 200 || rawFile.status == 0) {
                var allText = rawFile.responseText;
                var value = JSON.stringify;
                // now display on browser :)
            }
        }
    }
    rawFile.send(null);
}

readTextFile("file:///C:/your/path/to/file.txt");

使用纯javascript在客户端读取JSON文件数据

2 个答案: