使用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>

Answer 2

由于所有答案似乎都不必要地复杂，因此这里有一个简单的异步函数，它将文件内容作为对象返回：

async function parseJsonFile(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = event => resolve(JSON.parse(event.target.result))
    fileReader.onerror = error => reject(error)
    fileReader.readAsText(file)
  })
}

const object = await parseJsonFile(file)

Answer 3

这是对我有用的Sam Greenhalghs答案的速记版本。

$(document).on('change', '.file-upload-button', function(event) {
  var reader = new FileReader();

  reader.onload = function(event) {
    var jsonObj = JSON.parse(event.target.result);
    alert(jsonObj.name);
  }

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

<input class='file-upload-button' type="file" />