如果我有一个输入。
<input type="file" id="upload" onchange="getFile(this)">
我的用户将上传一个JSON文件（作为纯文本，所以我将不得不使用。JSON.parse())，我怎样才能把这个文件通过 getFile()
在 getFile(element)我试过用 element.files[0] 但这似乎并不包含实际数据。我也看了 此处, 此处和 此处但这些都不能解决我的问题。这个资源 在MDN上似乎很有前途，但我并不真正明白。
我希望有一个解决方案，包括 URL.createObjectURL() 或 FileReader().
另外，在有人在评论中发表这个问题之前，我知道这些解决方案并不是在所有的浏览器上都能工作，我想从前端做这个。
你可以利用 应对措施 构造函数并调用 .json() 在任何blob文件上。
function getFile (elm) {
new Response(elm.files[0]).json().then(json => {
console.log(json)
}, err => {
// not json
})
}
我想你需要这个api。
<!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>