javascript - 上传 JSON 文件并使用它

Question

如何在我的网页上点击“导入”按钮上传 JSON 文件，并使用它存储在变量中以使用 JavaScript 来使用和更新它。

我浏览了其他帖子，但找不到任何答案。

我正在使用这个函数保存 JSON 变量:

function save(filename, data){

    if(!data) {
        alert('error : No data')
        return;
    }

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }

这工作正常，它会在单击另一个按钮说“导出”时下载文件。如何将此文件上传回来并制作此文件数据的 JSON 变量？

Answer 1

如果没有服务器端代码，您最好的方法可能是为用户提供一个 textarea 元素以将 JSON 复制/粘贴到其中，然后使用 JSON.parse 解析它>.

你甚至可以使用像 Ace Editor 这样的东西为 JSON 提供语法高亮 - 您可以在 Ace Editor Kitchen Sink Demo 上看到它的实际效果- 从左上角的下拉列表中选择 JSON。

---

编辑:

原来我错了。这是一个演示正在使用的 FileReader 的 fiddle ，这正是您所需要的:

https://jsfiddle.net/Ln37kqc0/

代码如下:

Javascript:

document.getElementById('import').onclick = function() {
    var files = document.getElementById('selectFiles').files;
  console.log(files);
  if (files.length <= 0) {
    return false;
  }

  var fr = new FileReader();

  fr.onload = function(e) { 
  console.log(e);
    var result = JSON.parse(e.target.result);
    var formatted = JSON.stringify(result, null, 2);
        document.getElementById('result').value = formatted;
  }

  fr.readAsText(files.item(0));
};

HTML:

<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import</button>
<textarea id="result"></textarea>