title: jQuery function for more than one image preview before upload
body: <p>I'm using more than one <code>&lt;input type="file"&gt;</code> tag in my page with same class="inputFile" as shown below</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
    &lt;form id="form2" runat="server"&gt;
      &lt;input type='file' class="inputFile" /&gt;
      &lt;img class="image_upload_preview" src="http://placehold.it/100x100" alt="your image" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3"&gt;
    &lt;form id="form3" runat="server"&gt;
      &lt;input type='file' class="inputFile" /&gt;
      &lt;img class="image_upload_preview" src="http://placehold.it/100x100" alt="your image" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to show the preview of the image when I select an image, and I'm using jQuery function for that.</p>
  
  <pre><code>  function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          $('.image_upload_preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    $(".inputFile").change(function() {
      readURL(this);
    });
  </code></pre>
  
  <p>This code is working fine, but when I'm choosing an image for the first tag, it is selecting the same image for both fields as below:</p>
  
  <p><a href="https://i.stack.imgur.com/kPNVC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPNVC.png" alt="enter image description here"></a></p>
  
  <p>How can I solve this?</p>