上传JSON文件并使用它
我如何上传一个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变量？
回答 8
Stack Overflow用户
发布于 2016-03-24 10:58:35
没有服务器端代码，最好的方法可能是为用户提供一个textarea元素，以便将JSON复制/粘贴到其中，然后使用JSON.parse解析它。
您甚至可以使用像Ace编辑器这样的东西为JSON提供语法高亮显示--您可以在王牌编辑厨房水槽演示上看到它的作用--从左上角的下拉列表中选择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>Stack Overflow用户
发布于 2016-03-24 11:04:47
我有一种方法可以使用上传的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);
}Stack Overflow用户
发布于 2019-05-09 15:17:41
基本上传文件
<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)；}}
https://stackoverflow.com/questions/36127648
复制相似问题
腾讯云开发者
