title: Javascript: Load csv file and print it to page
body: <p>I just started learning JavaScript yesterday and I am stuck in the very beginning.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;JavaScript Test Program&lt;/title&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;script&gt;
        function uploadConfirmation(){
          alert("Data Loaded!");
        }
        function displayData(){
          var dataset = document.getElementById("uploaded_data").value;
          var show = [];
          for (var i=0; i &lt; dataset.length; i++) {
            show.push('&lt;span&gt;' + dataset[i] + '&lt;/span&gt;');
          }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;My Test Web Page&lt;/h1&gt;
      &lt;form&gt;
        Upload some files?
        &lt;br/&gt;
        &lt;input type="file" id="uploaded_data"/&gt;
        &lt;br/&gt;
        &lt;input type="submit" onmouseup="uploadConfirmation()"/&gt;
        &lt;button type="button" onclick="displayData()"&gt;Display Data&lt;/button&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Could someone tell me the right logic to approach this problem?</p>
  
  <hr>
  
  <p><strong>Update</strong><br>
  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.</p>
  
  <p>Following the direction from @tampis, here are two helpful resources online:<br>
   - <a href="http://blog.teamtreehouse.com/uploading-files-ajax" rel="noreferrer">Upload file using AJAX</a><br>
   - <a href="http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=AFpoL2hjarQ" rel="noreferrer">Upload file using File API</a></p>
  
  <p>Here is my code for uploading and displaying the data:</p>
  
  <pre><code>&lt;input type="file" id="fileinput" /&gt;
  &lt;script&gt;
    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! &lt;br /&gt;" + "name: " + f.name + "&lt;br /&gt;" + "content: " + contents + "&lt;br /&gt;" + "type: " + f.type + "&lt;br /&gt;" + "size: " + f.size + " bytes &lt;br /&gt;");
  
            var lines = contents.split("\n"), output = [];
            for (var i=0; i&lt;lines.length; i++){
              output.push("&lt;tr&gt;&lt;td&gt;" + lines[i].split(",").join("&lt;/td&gt;&lt;td&gt;") + "&lt;/td&gt;&lt;/tr&gt;");
            }
            output = "&lt;table&gt;" + output.join("") + "&lt;/table&gt;";
            document.write(output);
       }
        r.readAsText(f);
        document.write(output);
      } else { 
        alert("Failed to load file");
      }
    }
    document.getElementById('fileinput').addEventListener('change', readSingleFile);
  &lt;/script&gt;
  </code></pre>