title: Show a preview image of an HTML5 <input type="file"> selected image file
body: <p>sorry if question is wrong ,</p>
  
  <p>i want to <code>display</code> particular <strong><code>image</code></strong> in <strong><code>img</code></strong> tag when <code>&lt;input type=file&gt;</code>. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(':input[type=file]').change( function(event) {
   var tmppath = URL.createObjectURL(event.target.files[0]);
   $(this).closest("img").attr('src',tmppath);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="file" id="file1" name="file1"&gt;
      &lt;font color="#FF0000"&gt;For best view upload only &lt;b&gt;200*250&lt;/b&gt;&lt;/font&gt;&lt;div class="clear"&gt;&lt;/div&gt;
      &lt;img src="" id="img1" class="img1" height="100px" width="100px"&gt;&lt;br&gt;
  &lt;input type="file" id="file2" name="file2"&gt;
      &lt;font color="#FF0000"&gt;For best view upload only &lt;b&gt;200*250&lt;/b&gt;&lt;/font&gt;&lt;div class="clear"&gt;&lt;/div&gt;
      &lt;img src="" id="img2" class="img1" height="100px" width="100px"&gt;&lt;br&gt;
  &lt;input type="file" id="file3" name="file3"&gt;
      &lt;font color="#FF0000"&gt;For best view upload only &lt;b&gt;200*250&lt;/b&gt;&lt;/font&gt;&lt;div class="clear"&gt;&lt;/div&gt;
      &lt;img src="" id="img3" class="img1" height="100px" width="100px"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is my <a href="https://jsfiddle.net/bf7e39jk/" rel="nofollow">jsfiddle</a></p>