如何访问上传的JSON文件的数据? [英] How to access data of uploaded JSON file?

问题描述

我有这样的html代码:

I have a 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)
}

现在，我想使用存储在JSON文件中的名称和家族来调用 alert_data()，该文件使用我的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 to use 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>

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