I have a html code like this:
<input type="file" id="up" /> <input type="submit" id="btn" />
And I have a JSON file like this:
{ "name": "John", "family": "Smith" }
And a simple JavaScript function:
alert_data(name, family) { alert('Name : ' + name + ', Family : '+ family) }
Now I want to call alert_data()
with name and family that stored in JSON file which uploaded using my HTML input.
Is there any way to use an HTML5 file reader or something else?
I'm not using server-side programming, all of them are client-side.
Uploading and processing the JSON file with JavaScript # To actually read the file, we can use the FileReader. readAsText() method. We call it on our reader , and pass in the file to read as an argument. We can access the file using the files property on our file field.
JSON files are human-readable means the user can read them easily. These files can be opened in any simple text editor like Notepad, which is easy to use. Almost every programming language supports JSON format because they have libraries and functions to read/write JSON structures.
To access the JSON object in JavaScript, parse it with JSON. parse() , and access it via “.” or “[]”.
You will need an HTML5 browser, but this is possible.
(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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With