我有一个这样的html代码：
<input type="file" id="up" />
<input type="submit" id="btn" />
我有一个像这样的 JSON 文件：
{
"name": "John",
"family": "Smith"
}
还有一个简单的 JavaScript 函数：
alert_data(name, family)
{
alert('Name : ' + name + ', Family : '+ family)
}
现在我想alert_data()使用存储在使用我的 HTML 输入上传的 JSON 文件中的姓名和家庭进行调用。
有没有办法使用 HTML5 文件阅读器或其他东西？
我没有使用服务器端编程，它们都是客户端。
您将需要一个 HTML5 浏览器，但这是可能的。
(function(){
function onChange(event) {
var reader = new FileReader();
reader.onload = onReaderLoad;
reader.readAsText(event.target.files[0]);
}
function onReaderLoad(event){
console.log(event.target.result);
var obj = JSON.parse(event.target.result);
alert_data(obj.name, obj.family);
}
function alert_data(name, family){
alert('Name : ' + name + ', Family : ' + family);
}
document.getElementById('file').addEventListener('change', onChange);
}());<input id="file" type="file" />
<p>Select a file with the following format.</p>
<pre>
{
"name": "testName",
"family": "testFamily"
}
</pre>这是对我有用的 Sam Greenhalghs 答案的速记版本。
$(document).on('change', '.file-upload-button', function(event) {
var reader = new FileReader();
reader.onload = function(event) {
var jsonObj = JSON.parse(event.target.result);
alert(jsonObj.name);
}
reader.readAsText(event.target.files[0]);
});<input class='file-upload-button' type="file" />由于所有答案似乎都不必要地复杂，这里有一个简单的函数，它将文件内容作为对象返回：
async function fileToJSON(file) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.onload = event => resolve(JSON.parse(event.target.result))
fileReader.onerror = error => reject(error)
fileReader.readAsText(file)
})
}
是的！它可以用 HTML5 FileReader 来完成。它实际上非常简单。
将 json 保存为 .js 文件并将其加载到我的示例中
{
"name": "John",
"family": "Smith"
}
这就是魔法发生的地方：
$("#up").change(function(event){
var uploadedFile = event.target.files[0];
if(uploadedFile.type !== "text/javascript" && uploadedFile.type !== "application/x-javascript") {
alert("Wrong file type == " + uploadedFile.type);
return false;
}
if (uploadedFile) {
var readFile = new FileReader();
readFile.onload = function(e) {
var contents = e.target.result;
var json = JSON.parse(contents);
alert_data(json);
};
readFile.readAsText(uploadedFile);
} else {
console.log("Failed to load file");
}
});
function alert_data(json)
{
alert('Name : ' + json.name + ', Family : '+ json.family)
}
使用此代码的小提琴链接：http
: //jsfiddle.net/thomas_kingo/dfej7p3r/3/
（uploadedFile.type 检查仅在 Chrome 和 firefox 中测试）