时间戳

首页 > 解决方案 > 从 HTML 文件输入中读取 JSON

javascript - 从 HTML 文件输入中读取 JSON

问题描述

如果我有输入：

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

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

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

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

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

标签： javascripthtmljsonfile-io

解决方案

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

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

推荐阅读