title: How to update image src with the local path when user has selected an image file?
body: <p>Html</p>
  
  <pre><code>&lt;input type="file" name="picture" value="" /&gt;
  &lt;img id="preview_pic" src="/images/no-image.jpg" alt="" height="100" width="100" /&gt;
  </code></pre>
  
  <p>I can see the "file" input box gets populated with local file path. I want to replace the img src with this new local file  path to just give a preview of the image they have selected. If the file they have selected isnt an image file then keep the default no-image as is. Any ideas how to do this with Jquery. Once the form is submitted, I can process the file on server.</p>
  
  <p>Thank you.</p>
  
  <p>[ps - I am not sure which event to use, which makes sure that user has selected a file. for example I use onclick when user has clicked etc]</p>