Menu
I just started learning JavaScript yesterday and I am stuck in the very beginning.
My goal is to create a simple local html page, which reads in a csv file, print it to the page, and plot it using d3.js. This is what I have done so far:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Test Program</title>
<meta charset="UTF-8"/>
<script>
function uploadConfirmation(){
alert("Data Loaded!");
}
function displayData(){
var dataset = document.getElementById("uploaded_data").value;
var show = [];
for (var i=0; i < dataset.length; i++) {
show.push('<span>' + dataset[i] + '</span>');
}
</script>
</head>
<body>
<h1>My Test Web Page</h1>
<form>
Upload some files?
<br/>
<input type="file" id="uploaded_data"/>
<br/>
<input type="submit" onmouseup="uploadConfirmation()"/>
<button type="button" onclick="displayData()">Display Data</button>
</form>
</body>
</html>
Could someone tell me the right logic to approach this problem?
Update
Thanks for all the comments. I managed to find some resources online and came up with some code. I wish it is helpful for others.
Following the direction from @tampis, here are two helpful resources online:
- Upload file using AJAX
- Upload file using File API
Here is my code for uploading and displaying the data:
<input type="file" id="fileinput" />
<script>
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");
var lines = contents.split("\n"), output = [];
for (var i=0; i<lines.length; i++){
output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
}
output = "<table>" + output.join("") + "</table>";
document.write(output);
}
r.readAsText(f);
document.write(output);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>
291
As @shadysherif (from comments) pointed out, re-posting the answer (with full working code) here.
Here are two helpful resources online:
- Upload file using AJAX
- Upload file using File API
Here is my code for uploading and displaying the data:
<input type="file" id="fileinput" />
<script>
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");
var lines = contents.split("\n"), output = [];
for (var i=0; i<lines.length; i++){
output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
}
output = "<table>" + output.join("") + "</table>";
document.write(output);
}
r.readAsText(f);
document.write(output);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>
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