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 ments. 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>
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 ments. 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>
- The problem is that the form submits, the file is uploaded to the server, where you're probably not catching it, and you're expecting something to happen in javascript, which it doesn't. – adeneo Commented Apr 2, 2014 at 21:24
- @adeneo Thanks! How can I catch the uploaded file? – Boxuan Commented Apr 2, 2014 at 22:29
- You cannot catch the uploaded file (see this question). You have first to upload the file to you server from where you download it via AJAX. – Stephan Kulla Commented Apr 2, 2014 at 22:50
- 1 @Boxuan I don't know how to thank you. Really thanks for the question and the answer. BTW you can put the update as an answer so it will be easy for everyone to know that it is an answer not part of the question. – Shady Mohamed Sherif Commented Apr 30, 2019 at 21:46
- @shadysherif Done – Boxuan Commented Apr 30, 2019 at 23:03
2 Answers
Reset to default 6As @shadysherif (from ments) 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>
For reading a local file there are two ways:
- Uploading the file to the server and download it with AJAX
- Use the File API. The current support for it can be seen on this site: http://caniuse./fileapi
Here is a short mand for parsing a csv text file into an array of array of cells (using JQuery):
var csv = "..." // the text of the csv file obtained by AJAX or JQuery
var cells = csv.split("\n").map(function (row) {
return row.split(";").map($.trim);
});
If you do not want to use JQuery, you have to use something as in the above lines.