title: How to display uploaded image when user clicks on a button?
body: <p>I have the following line of code here which makes a user text appear upon clicking the send button (to simulate chat messages being sent)</p>
  
  <pre><code>&lt;script&gt;
      $('#subbut').click(function(){
          var user_msg = $("#user_msg").val();
  
          $("#msg").append('&lt;p&gt;User says:'+user_msg+'&lt;/p&gt;');
  &lt;/script&gt;
  
  &lt;body&gt;
      &lt;div id="msg"&gt;&lt;/div&gt;
      &lt;input type="text" name="user_msg" id="user_msg"&gt;
      &lt;input type="submit" value="Submit" id="subbut"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>However I wish to do this for input of images too.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="msg"&gt;&lt;/div&gt;
      &lt;input type="file" name="newImage" id="upload-photo"&gt;
      &lt;input type="submit" value="Submit" id="subbut"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How do you access the image and append it (to display the image) to the #msg div when the #subbut button is clicked? I've looked at something similar here <a href="https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded">Preview an image before it is uploaded</a> but I can't seem to adapt it.</p>