既然你有一个web应用程序，你可能有一个客户端和一个服务器。

如果您只有浏览器，并且希望从浏览器中运行的javascript读取本地文件，这意味着您只有客户端。出于安全原因，浏览器不应该允许您这样做。

然而，正如lauhub上面解释的那样，这似乎是有效的:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

另一个解决方案是在你机器的某个地方设置一个web服务器(在windows中很小，在linux中很小)，并使用XMLHttpRequest或D3库，从服务器请求文件并读取它。服务器将从本地文件系统获取文件，并通过web将其提供给您。

您不能对本地资源进行AJAX调用，因为请求是使用HTTP发出的。

一个解决方案是运行一个本地web服务器，提供文件并对localhost进行AJAX调用。

为了帮助你编写代码来读取JSON，你应该阅读jQuery.getJSON()的文档:

http://api.jquery.com/jQuery.getJSON/

要使用javascript读取外部本地JSON文件(data. JSON)，首先要创建数据。json文件:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

然后,

在脚本源代码中提到json文件和javascript文件的路径 <script type="text/javascript" src="data.json"></script> .json . <script type="text/javascript" src="javascript.js"></script> .js 从json文件中获取Object var mydata = JSON.parse(data); 警报(mydata [0] . name); alert (mydata [0] .age); 警报(mydata [1] . name); alert (mydata [1] .age);

有关更多信息，请参阅此参考资料。

你可以使用XMLHttpRequest()方法:

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

您可以使用console.log语句(注释掉)查看myObj的响应。

如果你了解AngularJS，你可以使用$http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

如果文件在不同的文件夹中，请提到完整的路径而不是文件名。

上面提到的所有解决方案只有在本地主机上运行本地web服务器时才有效。如果你想要在没有web服务器的情况下实现这一点，你可能需要通过使用文件上传控制来手动上传JSON文件。由于安全风险，如果没有本地服务器，浏览器将不提供此功能。

你也可以在没有本地服务器的情况下解析上传的文件。这里是示例代码，我已经实现了一个解决类似的问题。

 <div id="content">
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <h2>
        <pre id="output"></pre>
    </h2>
</div>
<script type="text/javascript">
    document.getElementById('inputfile')
        .addEventListener('change', function () {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                console.log(parsedJSON);
                // your code to consume the json                    
            }
            fileReader.readAsText(this.files[0]);
        }) 
</script>

在我的情况下，我想读取一个本地JSON文件，并在桌面上的html文件中显示它，这就是我所要做的。

注意:不要尝试使用JavaScript自动上传文件，由于浏览器施加的安全限制，即使这样做也是不允许的。

从硬盘加载.json文件是一个异步操作，因此它需要指定一个回调函数在文件加载后执行。

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

这个函数也适用于加载。html或。txt文件，通过覆盖mime类型参数为"text/html"， "text/plain"等。