使用JavaScript访问上传的JSON文件的数据

Question

我有这样的html代码：

<input type="file" id="up" />
<input type="submit" id="btn" />

我有一个像这样的JSON文件：

{
 "name": "John",
 "family": "Smith"
}

还有一个简单的JavaScript函数：

alert_data(name, family)
{
     alert('Name : ' + name + ', Family : '+ family)
}

现在，我想alert_data()使用存储在使用我的HTML输入上传的JSON文件中的名称和家庭进行呼叫。

是否可以使用HTML5文件阅读器或其他方式？
我没有使用服务器端编程，所有这些都是客户端。

Answer 1

您将需要HTML5浏览器，但这是可能的。

(function(){



    function onChange(event) {

        var reader = new FileReader();

        reader.onload = onReaderLoad;

        reader.readAsText(event.target.files[0]);

    }



    function onReaderLoad(event){

        console.log(event.target.result);

        var obj = JSON.parse(event.target.result);

        alert_data(obj.name, obj.family);

    }



    function alert_data(name, family){

        alert('Name : ' + name + ', Family : ' + family);

    }



    document.getElementById('file').addEventListener('change', onChange);



}());


<input id="file" type="file" />



<p>Select a file with the following format.</p>

<pre>

{

  "name": "testName",

  "family": "testFamily"

}

</pre>