title: Display uploaded images on button click
body: <p>On click of button preview i need the uploaded images to be shown ,the scripts it's working fine for changing event but not for the click one.</p>
  
  <p>HTML<BR></p>
  
  <pre><code> &lt;form action="test.php" enctype="multipart/form-data" id="mainform" method="post" name="mainform"&gt;
  Imagine 1:&lt;br&gt;
   &lt;input type="file" name="img1" id="img1"&gt;&lt;br&gt;
       &lt;br&gt;&lt;br&gt;     
  Imagine 2 :&lt;br&gt;
   &lt;input type="file" name="img2" id="img2"&gt;&lt;br&gt;
       &lt;br&gt;
   Imagine 3 :&lt;br&gt;
   &lt;input type="file" name="img3" id="img3"&gt;&lt;br&gt; 
       &lt;br&gt;
   Imagine 4 :&lt;br&gt;
   &lt;input type="file" name="img4" id="img4"&gt;&lt;br&gt;    
       &lt;br&gt;
   Imagine 5 :&lt;br&gt;
   &lt;input type="file" name="img5" id="img5"&gt;&lt;br&gt;   
       &lt;br&gt;
   Imagine 6 :&lt;br&gt;
   &lt;input type="file" name="img6" id="img6"&gt;&lt;br&gt;   
       &lt;br&gt;
   Imagine 7 :&lt;br&gt;
   &lt;input type="file" name="img7" id="img7"&gt;&lt;br&gt;    
       &lt;br&gt;
   Imagine 8 :&lt;br&gt;
   &lt;input type="file" name="img8" id="img8"&gt;&lt;br&gt;    
       &lt;br&gt;
   Imagine 9 :&lt;br&gt;
   &lt;input type="file" name="img9" id="img9"&gt;&lt;br&gt;   
       &lt;br&gt;
   Imagine 10 :&lt;br&gt;
   &lt;input type="file" name="img10" id="img10"&gt;&lt;br&gt;    
       &lt;br&gt;
   Imagine 11 :&lt;br&gt;
   &lt;input type="file" name="img11" id="img11"&gt;&lt;br&gt; 
       &lt;br&gt;
   Imagine 12 :&lt;br&gt;
   &lt;input type="file" name="img12" id="img12"&gt;&lt;br&gt;    
       &lt;br&gt;
   Imagine 13 :&lt;br&gt;
   &lt;input type="file" name="img13" id="img13"&gt;&lt;br&gt;    
       &lt;br&gt;
   Imagine 14 :&lt;br&gt;
   &lt;input type="file" name="img14" id="img14"&gt;&lt;br&gt;     
       &lt;br&gt;
   Imagine 15 :&lt;br&gt;
   &lt;input type="file" name="img15" id="img15"&gt;&lt;br&gt;    
       &lt;br /&gt;
       Preview:
       &lt;br /&gt;
       &lt;input type="checkbox" id="previz" /&gt;Preview
  &lt;/form&gt;
  &lt;div id="#previzdiv"&gt;
  &lt;img src="" id="preview-img1"&gt;
  &lt;img src="" id="preview-img2"&gt;
  &lt;img src="" id="preview-img3"&gt;
  &lt;img src="" id="preview-img9"&gt;
  &lt;img src="" id="preview-img5"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre class="lang-js prettyprint-override"><code>$("#center2 #forme #previz").change(function(){
      if(this.checked){
          for(i=1;i&lt;15;i++){
              j = $("form#mainform #img"+i);
              console.log(j);
              readURL(j);
          }
      }
  });
  
  function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function (e) {
              imgId = '#preview-'+$(input).attr('id');
              $(imgId).attr('src', e.target.result);
          }
  
          reader.readAsDataURL(input.files[0]);
      }
  }
  
  $("form#mainform input[type='file']").change(function(){
      readURL(this);
      console.log(this);
  });
  </code></pre>
  
  <p>The console log from "j" should look like <code>&lt;input type="file" name="img1" id="img1"&gt;</code> yet it different from what change event is console logging.Is the approach correct?
  <strong>JSFIDDLE:</strong><a href="https://jsfiddle.net/eLss3ojx/8/" rel="nofollow">https://jsfiddle.net/eLss3ojx/8/</a></p>