从 HTML 文件输入中读取 JSON答案

【问题标题】：Read JSON from from HTML file input从 HTML 文件输入中读取 JSON
【发布时间】：2020-05-10 04:01:04
【问题描述】：

如果我有意见：

<input type="file" id="upload" onchange="getFile(this)">

我的用户将上传一个 JSON 文件（作为纯文本，所以我将不得不使用JSON.parse()），我怎样才能获取这个文件并通过getFile() 实际获取数据

在getFile(element) 中，我尝试使用element.files[0]，但它似乎不包含实际数据。我也看过here、here 和here，但这些都不能解决我的问题。 MDN 上的This resource 似乎很有希望，但我真的不明白。

我想要一个涉及URL.createObjectURL() 或FileReader() 的解决方案。

此外，在任何人在 cmets 中发布此内容之前，我确实了解这些解决方案不适用于所有浏览器，我想从前端执行此操作。

【问题讨论】：

标签： javascript html json file-io

【解决方案1】：

您可以利用 Response 构造函数并在任何 blob/文件上调用 .json()。

function getFile (elm) {
  new Response(elm.files[0]).json().then(json => {
    console.log(json)
  }, err => {
    // not json
  })
}

使用 blob.prototype[...] 上的新读取方法的替代方法

new Blob(['1']).text().then(JSON.parse).then(console.log)

我猜对于较大的文件，response.json 可能会更快/更好，因为它可以在后台解析内容并且不会像 JSON.parse 那样阻塞主 UI

【讨论】：

谢谢，它有效！我喜欢这个答案的简洁性以及它也更容易处理错误的事实。虽然它没有使用我提到的任何一种方法，但我认为这是一个更好的解决方案。
这太棒了！比使用 FileReader 更简洁。
w3c 添加了 blob.text() 和 blob.arrayBuffer() 以使其具有一些 IDL 方法来避免这种小黑客攻击，但我觉得他们几乎错过了 .json

【解决方案2】：

我认为你需要这个 api：

FileReader Api From MDN

JSON#parse()

View In Stackblitz

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Read Text</title>
  <style>
    div {
     margin-top: 30px;
     border: solid 1px black;
     padding: 5px;
    }
  </style>
  <script>
    function processFiles(files) {
      var file = files[0];

      var message = document.getElementById("message");
      message.innerHTML = "File Name：" + file.name + "<br>";
      message.innerHTML += "File Size：" + file.size + "<br>";
      message.innerHTML += "File Type：" + file.type + "<br>";

      var reader = new FileReader();
      reader.onload = function (e) {
        var output = document.getElementById("fileOutput");  
        // parse string to json 
        output.textContent = JSON.parse(e.target.result);
      };
      reader.readAsText(file);
    }
  </script>
</head>
<body>
  <input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">
  <div id="message"></div>
  <div id="fileOutput"></div>
</body>
</html>

【讨论】：

可能会考虑添加一个try/catch，以防JSON.parse()从坏文件中抛出错误