How to display image before upload inside custom style input file?

Question

I'm trying to display each image inside the custom style input file label before user uploads in the database. The script I'm using works at displaying only one image at the time and it is always located somewhere random. I'd like each image to appear as if they are inside the label. Each image does not display right inside the label. What am I doing wrong?

  function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#photo1').attr('src', e.target.result); } reader.onload = function (e) { $('#photo2').attr('src', e.target.result); } reader.onload = function (e) { $('#photo3').attr('src', e.target.result); } reader.onload = function (e) { $('#photo4').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $(".img1").change(function() { readURL(this); }); $(".img2").change(function() { readURL(this); }); $(".img3").change(function() { readURL(this); }); $(".img4").change(function() { readURL(this); }); 

 .col-md-4 { width: 33.33333333%; display: inline-block; margin-bottom: 15%; } .labelav.largeFile:after { position: relative; width: 5% !important; max-width: 100%; content: "Upload Photo + "; text-align: center; padding: 10%; border-radius: 10px; border: 5px dashed #ccc; color: #ccc; font-family: "Helvetica Neue", Helvetica, Arial; font-size: medium; } .labelav.largeFile:hover:after { background: #ccc; color: #fff; cursor: pointer; } .labelav.largeFile input.file { visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class='col-md-4'> <label class="labelav largeFile" for="file"> <input type="file" id="file" class="file img1" name="photo1" /> <img id="photo1" src="#" alt="" /> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file"> <input type="file" id="file" class="file img2" name="photo2" /> <img id="photo2" src="#" alt="" /> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file"> <input type="file" id="file" class="file img3" name="photo3" /> <img id="photo3" src="#" alt="" /> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file"> <input type="file" id="file" class="file img4" name="photo4" /> <img id="photo4" src="#" alt="" /> </label> </div> </form> 

Answer 1

The reason the image winds up in the last spot is because in your readURL function, you overwrite the .onload property so that only the last value (which points to #photo4 ) is stored:

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

            // All you are doing here is setting the value of the 
            // onload property...
            reader.onload = function(e) {
              $('#photo1').attr('src', e.target.result);
            }

            // And here, you are overwriting the last value and storing
            // a new one...
            reader.onload = function(e) {
              $('#photo2').attr('src', e.target.result);
            }

            // And here, you are overwriting the last value and storing
            // a new one...
            reader.onload = function(e) {
              $('#photo3').attr('src', e.target.result);
            }

            // This is the function that will actually run
            // when the load event of the reader fires because it is 
            // the last value you are storing in the propery:
            reader.onload = function(e) {
              $('#photo4').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
          }
        }

Additionally, each of your input type=file elements uses the same id , which is not ever a good idea. All id s should be unique.

Now, since you have so much duplication in your code, we can reduce it to this working version:

 // No need to set up essentially the same event handler separately // This will set each of the input type=file elements up to the same // change event handling function. The 'e' argument represents the // change event itself: $(".file").on("change", function(e) { if (this.files && this.files[0]) { var reader = new FileReader(); // Use W3C DOM Event Standard for setting up event listeners // instead of `onclick`, `onload`, etc. properties. We can use // the same one function no matter which input type=file was clicked // Here 'evt' represents the load event of the reader reader.addEventListener("load", function(evt) { // Set the src attribute of the next element sibling // to the input that was changed: e.target.nextElementSibling.setAttribute('src', evt.target.result); }); reader.readAsDataURL(this.files[0]); } }); 

 .col-md-4 { width: 33.33333333%; display: inline-block; margin-bottom: 15%; } .labelav.largeFile:after { position: relative; width: 5% !important; max-width: 100%; content: "Upload Photo + "; text-align: center; padding: 10%; border-radius: 10px; border: 5px dashed #ccc; color: #ccc; font-family: "Helvetica Neue", Helvetica, Arial; font-size: medium; } .labelav.largeFile:hover:after { background: #ccc; color: #fff; cursor: pointer; } .labelav.largeFile input.file { visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class='col-md-4'> <label class="labelav largeFile" for="file1"> <input type="file" id="file1" class="file img1" name="photo1"> <img id="photo1" src="#" alt=""> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file2"> <input type="file" id="file2" class="file img2" name="photo2"> <img id="photo2" src="#" alt=""> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file3"> <input type="file" id="file3" class="file img3" name="photo3"> <img id="photo3" src="#" alt=""> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file4"> <input type="file" id="file4" class="file img4" name="photo4"> <img id="photo4" src="#" alt=""> </label> </div> </form> 

Answer 2

With Scott Marcus answer, here's the FULL answer to my question which is NOT a duplicate. On top of javascript issues I also had display issues. Note that you may have to play with the pixels to work with your own code. For some reason I had to write something different from the code in my program for the snippet to work...

So here it is:

 // No need to set up essentially the same event handler separately // This will set each of the input type=file elements up to the same // change event handling function. The 'e' argument represents the // change event itself: $(".file").on("change", function(e) { if (this.files && this.files[0]) { var reader = new FileReader(); // Use W3C DOM Event Standard for setting up event listeners // instead of `onclick`, `onload`, etc. properties. We can use // the same one function no matter which input type=file was clicked // Here 'evt' represents the load event of the reader reader.addEventListener("load", function(evt) { // Set the src attribute of the next element sibling // to the input that was changed: e.target.nextElementSibling.setAttribute('src', evt.target.result); }); reader.readAsDataURL(this.files[0]); } }); 

 .col-md-4 .labelav.largeFile{ width:33.33%; display: inline-block; margin-bottom: 10%; border-radius: 10px; border: 5px dashed #ccc; min-height:200px; cursor:pointer; background: url("http://www.startuppassion.eu/wp-content/uploads/2017/03/plus-sign.png") no-repeat center; background-size: 40%; } .labelav img{ width:30%; position:absolute; left:20px; } .labelav.largeFile img:after { width:100% !important; display:inline-block; max-width:100%; } .labelav.largeFile input.file { width:0px; height:0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class='col-md-4 imgblock'> <label class="labelav largeFile" for="file1"> <input type="file" id="file1" class="file img1" name="photo1"> <img id="photo1" src="#" alt=""> </label> </div> <div class='col-md-4 imgblock'> <label class="labelav largeFile" for="file2"> <input type="file" id="file2" class="file img2" name="photo2"> <img id="photo2" src="#" alt=""> </label> </div> <div class='col-md-4 imgblock'> <label class="labelav largeFile" for="file3"> <input type="file" id="file3" class="file img3" name="photo3"> <img id="photo3" src="#" alt=""> </label> </div> <div class='col-md-4'> <label class="labelav largeFile" for="file4"> <input type="file" id="file4" class="file img4" name="photo4"> <img id="photo4" src="#" alt=""> </label> </div> </form>