Javascript - Image preview before upload. Needed on multiple instances on same page

Question

I have a page that has multiple fields to upload images individually and I wanted a script that would allow the user to preview the image before submitting.

I used this script on the first field and it works fine.

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#main').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

However, it doesn't work for the remainder of the previews even if I make them unique. What should I do in order to copy the same script and have it work on multiple instances on the same page?

Update:

The html for the preview looks like this:

                    <div class="row">
                        <div class="col-md-3">
                            <h5>Main Photo:</h5>
                            <input class="form-control" type="file" name="main" onchange="readURL(this);" />
                        </div>
                        <div class="col-md-3">
                            <h6>Preview:</h6>
                            <img id='main' style="height:100px;" />
                        </div>
                        <div class="col-md-3">
                            <h5>Front Photo:</h5>
                            <input class="form-control" type="file" name="front" onchange="readURL(this);" />
                        </div>
                        <div class="col-md-3">
                            <h6>Preview:</h6>
                            <img id='front' style="height:100px;" />
                        </div>
                    </div>

Answer 1

Preview a file (image) before it is uploaded, on multiple instances on the same page.

Just use image input field name to id for img to show. Check the simple and clean code below with demo to jsfiddle.

 
  $("input[type=file]").change(function() {
    readURL(this);
    filename = this.files[0].name;
    console.log(filename);
  });
  
  
  // image file upload preview
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#' + input.name).attr('src', reader.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>User Image</label>
 <input type="file" name="user_image"> <br />
 <img id="user_image" style="width:75px;" />
 <hr />
<label>User Signature</label>
 <input type="file" name="user_signature"> <br />
 <img id="user_signature" style="width:75px;" />
</form>

Answer 2

Perhaps you could make use of the unique name attribute of the <input /> fields to access the specific/corresponding image element for previewing the file like so:

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {

      // Use the input element's name attrbute to select and
      // update the image element with matching id
      $('#' + input.name).attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
    <div class="col-md-3">
        <h5>Main Photo:</h5>
        <input class="form-control" type="file" name="main" onchange="readURL(this);" />
    </div>
    <div class="col-md-3">
        <h6>Preview:</h6>
        <img id='main' style="height:100px;" />
    </div>
    <div class="col-md-3">
        <h5>Front Photo:</h5>
        <input class="form-control" type="file" name="front" onchange="readURL(this);" />
    </div>
    <div class="col-md-3">
        <h6>Preview:</h6>
        <img id='front' style="height:100px;" />
    </div>
</div>