title: How to display an image from a file input?
body: <p>I would like to choose a file and display the image on the browser. 
  I tried inserting the direct image path and it worked. </p>
  
  <p>The problem now is, how can I display the image from the <code>&lt;input type=file&gt;</code> ?</p>
  
  <p>Here is what my code looks like:</p>
  
  <pre><code>function myFunction() {
      var file = document.getElementById('file').files[0];
      var reader = new FileReader();
  
      reader.onloadend = function {
          var image = document.createElement("img");
          image.src = "reader"
          image.height = 200;
          image.width = 200;
  
          document.body.appendChild(image);
      }
  }
  </code></pre>
  
  
  
  <pre><code>&lt;input type=file name=filename id=file&gt;
  &lt;button type=button onclick='myFunction()'&gt;Display&lt;/button&gt;
  </code></pre>