Question

对于我得到的学校项目，我需要显示使用html中的输入上传的JSON文件内容。它包含了机械师的约会，但我似乎无法弄清楚如何从上传的文件中获取内容，并将其存储到一个变量中以进行存储并暂时显示在一个范围内。

这是我目前拥有的代码：
js

function importFile() {
    var importedFile = document.getElementById('import-file').files[0];

    var fileContent = JSON.parse(importedFile.value);

    document.getElementById('json-file').innerHTML = fileContent;   
}

html

<label for="import-file">Upload the testfile:</label>
<input type="file" name="import-file" id="import-file" accept="application/json" required>
<button onclick="importFile()">Submit</button>

<p>
    <span id="json-file"></span>
</p>

JSON文件

[
  {
    "Appointment": {
      "Id": 2,
      "nameCustomer": "gibberish",
      "addressCustomer": "gibberish 34, gibberish",
      "timeOfAppointment": "2020-01-07T10:00:00Z",
      "nearbyTramStop": "gibberish",
      "distanceToStop": 340,
      "reasonAppointment": "gibberish",
      "nameMechanic": "gibberish"
    }
  },
  {
    "Appointment": {
      "Id": 1,
      "naamKlant": "gibberish",
      "adresKlant": "gibberish 12, gibberish",
      "gewenstTijdstip": "2020-01-07T12:15:00Z",
      "dichtsbijzijndeHalte": "gibberish",
      "afstandHalte": 200,
      "redenAfspraak": "gibberish",
      "naamMonteur": "gibberish"
    }
  }
]

现在，我只希望能够将内容显示为段落中的文本。如您所见，我尝试解析它，但是没有成功。我似乎在网上找不到任何可以帮助我的东西。

这些是我尝试过的事情：

var fileContent = JSON.parse(importedFile);

var fileContent = importedFile.value;

使用解析时，出现此错误：

VM4077:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at importFile (main.js:129)
    at HTMLButtonElement.onclick (index.html?import-file=BBMonteurs.json:30)

有人知道我的问题的解决方案吗？预先感谢！

Answer 1

function importFile() {
    var importedFile = document.getElementById('import-file').files[0];

    var reader = new FileReader();
    reader.onload = function() {
      var fileContent = JSON.parse(reader.result);

      // Do something with fileContent
      // document.getElementById('json-file').innerHTML = fileContent;  
    };
    reader.readAsText(importedFile); 
}

如何读取上传的JSON文件

1 个答案: