Как вы поместите ссылку на загруженный файл и сможете распечатать значение файла в HTML? - PullRequest
Новая
       0

Как вы поместите ссылку на загруженный файл и сможете распечатать значение файла в HTML?

2 голосов
/ 02 ноября 2019

Привет всем экспертам и студентам, таким как я. Если я хочу загрузить локальный файл 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[]" />

Эти строки кода дают мне кнопку для загрузки файла, и я хочу напечатать элемент следующим образом.

Output

Я хочу распечатать файл JSON, и, пытаясь это сделать, я попытался использовать цикл for, но я не знаю, какая часть кода ссылается на загруженныйфайл, чтобы я мог начать писать мой цикл? (Или, возможно, его даже нет в моем написанном коде.) Могу ли я сделать это? 

var myJSON_object = input;

, чтобы использовать myJSON_object в качестве ссылки на входной файл JSON? Кроме того, большое спасибо за лучший способ распечатать файл JSON.

1 Ответ

1 голос
/ 02 ноября 2019 

<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>
...