上传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的小提琴,这正是您所需要的:

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>

Answer 2

我有办法使用上传的json文件,这是我发现的方式.

$("#inputFile").change(function(e) {
    onChange(e);
});

function onChange(event) {
    var reader = new FileReader();
    reader.onload = onReaderLoad;
    reader.readAsText(event.target.files[0]);
}

function onReaderLoad(event){
    //alert(event.target.result);
    var obj = JSON.parse(event.target.result);
    alert(obj);
}

Answer 3

基本上传文件：

    <input id="contentFile" type="file" accept="application/json" />

  document.getElementById('contentFile').onchange = function(evt) {
        try {
            let files = evt.target.files;
            if (!files.length) {
                alert('No file selected!');
                return;
            }
            let file = files[0];
            let reader = new FileReader();
            const self = this;
            reader.onload = (event) => {
                console.log('FILE CONTENT', event.target.result);
            };
            reader.readAsText(file);
        } catch (err) {
            console.error(err);
        }
    }