首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >上传JSON文件并使用它

上传JSON文件并使用它
EN

Stack Overflow用户
提问于 2016-03-21 09:49:05
回答 8查看 45.7K关注 0票数 28

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

我已经翻阅了其他帖子,但没有找到任何答案。

我使用以下函数保存JSON变量:

代码语言:javascript
复制
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变量?

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2016-03-24 10:58:35

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

您甚至可以使用像Ace编辑器这样的东西为JSON提供语法高亮显示--您可以在王牌编辑厨房水槽演示上看到它的作用--从左上角的下拉列表中选择JSON。

编辑:

结果我错了。下面是演示正在使用的FileReader的小提琴,这正是您所需要的:

https://jsfiddle.net/Ln37kqc0/

以下是代码:

Javascript:

代码语言: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:

代码语言:javascript
复制
<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import</button>
<textarea id="result"></textarea>
票数 38
EN

Stack Overflow用户

发布于 2016-03-24 11:04:47

我有一种方法可以使用上传的json文件,下面是我找到的方法。

代码语言:javascript
复制
$("#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);
}
票数 13
EN

Stack Overflow用户

发布于 2019-05-09 15:17:41

基本上传文件

代码语言:javascript
复制
    <input id="contentFile" type="file" accept="application/json" />

document.getElementById('contentFile').onchange =函数(Evt){尝试{ let文件= evt.target.files;if (!files.length) {警报(‘没有选择文件!’);返回;} let file =FileReader;让阅读器=新的FileReader();const = this;reader.onload =(事件) => {console.log(‘文件内容’,event.target.result);};reader.readAsText(文件);} catch (err) { console.error(err);}}

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36127648

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档