如何访问上传的 JSON 文件的数据？

Posted 2023-02-23

【中文标题】如何访问上传的 JSON 文件的数据？

【英文标题】：How to access data of uploaded JSON file?

【发布时间】：2014-06-14 05:12:45

【问题描述】：

我有一个这样的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)

现在我想用我的 HTML 输入上传的 JSON 文件中存储的姓名和家庭来调用 alert_data()。

有什么方法可以使用 HTML5 文件阅读器或其他东西吗？ 我没有使用服务器端编程，它们都是客户端。

【问题讨论】：

html5rocks.com/en/tutorials/file/dndfiles

@Howdy_McGee — Ajax 在这种情况下不会有帮助

@Manwal — JSON 文件来自客户端系统，它不在服务器上，因此没有 URL。

查看here 了解返回对象的简单函数

【参考方案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>

【讨论】：

截至 2019 年 11 月工作正常。我被要求从上传的 json 文件中提取数据

【参考方案2】：

这是对我有用的 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" />

【参考方案3】：

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

async function fileToJSON(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)
  )

【参考方案4】：

是的！它可以通过 HTML5 FileReader 完成。它实际上非常简单。 将 json 保存为 .js 文件并在我的示例中加载它

 "name": "John",
 "family": "Smith"

这就是神奇发生的地方：

$("#up").change(function(event)
    var uploadedFile = event.target.files[0]; 
    
     if(uploadedFile.type !== "text/javascript" && uploadedFile.type !== "application/x-javascript")  
        alert("Wrong file type == " + uploadedFile.type); 
        return false;
    
    
    if (uploadedFile) 
        var readFile = new FileReader();
        readFile.onload = function(e)  
            var contents = e.target.result;
            var json = JSON.parse(contents);
            alert_data(json);
        ;
        readFile.readAsText(uploadedFile);
     else  
        console.log("Failed to load file");
    
);

function alert_data(json)

     alert('Name : ' + json.name + ', Family : '+ json.family)

使用此代码的小提琴链接：http://jsfiddle.net/thomas_kingo/dfej7p3r/3/ （uploadFile.type检查只在Chrome和firefox中测试过）

【讨论】：

请avoid link only answers。答案“仅是指向外部网站的链接”may be deleted。