2

大家好，像我这样的专家和学生。如果我想将本地 JSON 文件上传到 HTML 并打印出来，有什么办法吗？

以下是 JSON 文件中的内容

{
"Result" : [
     {"title":"JSON", "url":"http://json.org",
"description":"the home page for JavaScript Object
Notation"},

{"title":"XML", "url":"http://xml.org", 
"description":"the home page for Extensible Markup Language"}
]
}

这些行是我上传文件的代码。

<form action="/action_page.php">
Upload a file:
<input type="file" id="uploadedFile" name="uploadedFile[]" />

这些代码行给了我一个上传文件的按钮，我想像下面这样打印元素。

输出

我想打印 JSON 文件，通过这样做我尝试使用 for 循环，但我不知道代码的哪一部分引用了上传的文件，所以我可以开始编写我的 for 循环？（或者也许它甚至不存在于我的书面代码中。）我可以这样做吗？

var myJSON_object = input;

使用 myJSON_object 作为对输入 JSON 文件的引用？此外，非常感谢打印 JSON 文件的更好方法。

4

1 回答 1

1 

<html>
<style>
#out pre{
    background-color: #bdc3c3;
border:1px solid #fff;
border-radius:5px;
padding:10px;
}
</style>
<head>
<input id="file" type="file" />
<div id="out"></div>
<script>
const out = document.getElementById('out');
(function(){
    
    function onChange(event) {
        var reader = new FileReader();
        reader.onload = onReaderLoad;
        reader.readAsText(event.target.files[0]);
    }

    function onReaderLoad(event){

        var obj = JSON.parse(event.target.result);
        for(let x in obj.Result){
       createElement(obj.Result[x]);
      
}
}

function createElement(obj){
 let h1= document.createElement('h1');
 h1.innerText = obj.title
 let anchor = document.createElement('a');
 anchor.href = obj.url;
  
anchor.innerText=obj.url.replace('http://','');
 let p = document.createElement('p');
 p.innerText = obj.description;
 let pre= document.createElement('pre');

pre.appendChild(h1);pre.appendChild(anchor);pre.appendChild(p);
out.appendChild(pre);
}
  
    
   
    document.getElementById('file').addEventListener('change', onChange);

}());
</script>
</head>

于 2019-11-02T17:49:13.907 回答