Javascript 从HTML文件输入读取JSON

如果我有意见：

我的用户将上传一个JSON文件（作为纯文本，因此我必须使用

JSON.parse（）

），我如何获取该文件并通过

getFile（）实际获取数据

在

getFile（element）

中，我尝试使用

element.files[0]

，但它似乎不包含实际数据。我也看过了，但这些都不能解决我的问题。在MDN上似乎很有希望，但我并不真正明白

我想要一个涉及

URL.createObjectURL（）

或

FileReader（）

的解决方案

---

另外，在任何人在评论中发布此内容之前，我知道这些解决方案并不适用于所有浏览器，我希望从前端执行此操作。

我认为您需要此api：

阅读课文
div{
边缘顶部：30px；
边框：实心1px黑色；
填充物：5px；
}
函数processFiles（文件）{
var file=files[0]；
var message=document.getElementById（“消息”）；
message.innerHTML=“文件名：“+File.Name+”
”；
message.innerHTML+=“文件大小：”+File.Size+“
”；
message.innerHTML+=“文件类型：”+File.Type+“
”；
var reader=new FileReader（）；
reader.onload=函数（e）{
var output=document.getElementById（“fileOutput”）；
//将字符串解析为json
output.textContent=JSON.parse（e.target.result）；
};
reader.readAsText（文件）；
}

我认为您需要此api：

阅读课文
div{
边缘顶部：30px；
边框：实心1px黑色；
填充物：5px；
}
函数processFiles（文件）{
var file=files[0]；
var message=document.getElementById（“消息”）；
message.innerHTML=“文件名：“+File.Name+”
”；
message.innerHTML+=“文件大小：”+File.Size+“
”；
message.innerHTML+=“文件类型：”+File.Type+“
”；
var reader=new FileReader（）；
reader.onload=函数（e）{
var output=document.getElementById（“fileOutput”）；
//将字符串解析为json
output.textContent=JSON.parse（e.target.result）；
};
reader.readAsText（文件）；
}

您可以利用构造函数在任何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

您可以利用构造函数对任何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)

---

我想对于较大文件Acth.JSON可能更快，更好，因为它可以解析背景中的内容，而不是像JSON那样阻塞主UI。PARSE

可以考虑添加<代码>尝试/catch < /C> >在<代码> JSON（PARSER）（<代码> >从坏文件中抛出错误，考虑在<代码> JSON.PARSE（）中添加<代码>尝试/ catch >代码>从坏文件中抛出错误谢谢，它可以工作！我喜欢这个答案的简洁性和它更容易处理错误的事实。虽然它没有使用我提到的任何一种方法，但我认为这是一个更好的解决方案。这太棒了！w3c添加了

blob.text（）

和

blob.arrayBuffer（）

，使其具有一些IDL方法，以避免出现这种小问题，但我觉得它们几乎错过了

。json

谢谢，它很有效！我喜欢这个答案的简洁性和它更容易处理错误的事实。虽然它没有使用我提到的任何一种方法，但我认为这是一个更好的解决方案。这太棒了！w3c添加了

blob.text（）

和

blob.arrayBuffer（）

，使其具有一些IDL方法，以避免出现这种小问题，但我觉得它们几乎错过了

.json