title: How do I show an uploaded image in Jquery?
body: <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;script src = "/jquery.js"&gt;&lt;/script&gt;&lt;/head&gt;
  
  Test Image Upload
      &lt;input type = "file" id = "chooseimage" name = "chooseimage" accept = ".jpg, .jpeg, .png" multiple&gt;&lt;br&gt;
      &lt;input type = "button" id = "submitimages" value = "Send Image"&gt;
      &lt;br&gt;
  &lt;div id = "test"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      $("#submitimages").click(function(){
          var imageinput = $("#chooseimage")[0].files[0];
          var reader = new FileReader();
          var a = reader.readAsDataURL(imageinput);
          reader.onload = function(e)(){};  // what do i do with this?
          $("#test").html(a);
      });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For the Jquery, let me quickly run down my thought process.</p>
  
  <p>1) I get the input id "chooseimage" and grab the files using .files command. I assume .files[0] means to select the first file from the HTML element (but it only selects it, not actually reading it)?</p>
  
  <p>2) create a new FileReader(). I'm not quite sure what this does, I think it allows me to... read the file?</p>
  
  <p>3) But to first read the file using FileReader, we need to convert the file to a base64 encoded string, so we use readAsDataURL to convert.</p>
  
  <p>4) And then I do somrthing with reader.onload(), but I am not sure what this does. I was reading other tutorials on this and they all had it but no explanation what it does. I read the Mozilla Documentation but didn.t quite understand it. I've done nothing with it so far.</p>
  
  <p>5) I want to show the base64 string in the div element with id "test". I think the browser will automatically interpret the string into an image. Either way, it's not showing anything.</p>
  
  <p>Can someone walk me through what I do or do not understand correctly and what I'm doing wrong?</p>