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


Read JSON file data on client side with pure javascript

本问题已经有最佳答案，请猛点这里访问。

我在本地计算机上有一个JSON文件，我想通过纯JavaScript读取它的内容并将其显示在Web浏览器上。任何与服务器端相关的内容对我都不起作用。这需要完全在客户机端完成。可能的解决方案是什么？注意：不应该使用Ajax和与之相关的任何内容。

相关讨论

如果你不想做一个ajax来加载文件，让用户选择他想用加载的文件，也许这种方法对你有用。

1
2
3
4
5
6
7
8
9
10
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;
  }
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  JS Bin
</head>
<body>
  <input type="file" name="" id="myfile">
 
 
  <button id="show">Show</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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");
相关讨论