使用javascript访问上传的json文件的数据

我有一些像这样的HTML代码：

我有一个像这样的json文件：

 { "name": "John", "family": "Smith" } 

还有一个简单的javascript函数：

 alert_data(name, family) { alert('Name : ' + name + ', Family : '+ family) } 

现在我想调用带有名称和系列的alert_data（），该名称和系列存储在使用我的html输入上传的json文件中

有什么办法吗？ 使用html5文件阅读器或其他？

注意：我不使用服务器端编程，所有这些都是客户端

请帮帮我 ：）

Answer 1

您将需要一个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); }()); 

  
Select a file with the following format.
 
 { "name": "testName", "family": "testFamily" } 
 

Answer 2

这是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]); }); 

Answer 3

是的！ 可以使用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/
（仅在Chrome和Firefox中测试了uploadedFile.type检查）