使用JavaScript访问上传的JSON文件的数据 [英] Access data of uploaded JSON file using JavaScript

问题描述

我有一个像这样的HTML代码：

I have an html code like this:

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

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

And I have a JSON file like this:

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

一个简单的JavaScript函数：

And a simple JavaScript function:

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

现在我想调用 alert_data（），其名称和系列存储在JSON文件中，使用我的文件上传HTML输入。

Now I want to call alert_data() with name and family that stored in JSON file which uploaded using my HTML input.

有没有办法使用HTML5文件阅读器或其他东西？

我没有使用服务器端编程，所有这些客户端。

Is there any way using an HTML5 file reader or something else?
I'm not using server side programming, all of them are client side.

推荐答案

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

You will need an HTML5 browser, but this is possible.

(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>

这篇关于使用JavaScript访问上传的JSON文件的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！