CODEWITHSUNDEEP
javascript
user12744981
user12744981

Reputation:

Second img doesn't show preview

There are two input file type and each has a corresponding image to display. Displaying Picture 1 definitely works but when its time to add another picture in Picture 2, it doesn't display any. Does the javascript code attached only support 1 input file type?

HTML

<label class="display-4">Picture 1</label>
<input type='file' name="row11" required/>
</center>
</div>

<div class="form-group">
    <center>
<img name="row11" src="#" alt="" height=1000 width=1000>
</center>
</div>

<div class="form-group">
    <center>
<label class="display-4">Picture 2</label>
<input type='file' name="row12" required/>
</center>
</div>

<div class="form-group">
    <center>
<img name="row12" src="#" alt="" height=1000 width=1000>
</center>
</div>

Javascript

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      var img = document.querySelector('img'); // $('img')[0]
      img.src = URL.createObjectURL(this.files[0]); // set src to blob url
      img.onload = imageIsLoaded;
    }
  });
});

Upvotes: 1

Views: 51

Answers (2)

prathameshk73
prathameshk73

Reputation: 1088

document.querySelector('input[type="file"]') will return first element in the page. Use querySelectorAll to get all input file field. Also you need to get adjacent image tag to display the selected image. You are using same name for input file tag as well as img tag. So based on your code I am fetching img tag from the selected input file name attribute.

Below is the working example.

<html>

<head>
    <title>Class</title>
   
    <script>

        window.addEventListener('load', function () {
            var fileInputs =  document.querySelectorAll('input[type="file"]');
            if (fileInputs && fileInputs.length > 0) {
                fileInputs.forEach(function(inputFileField) {
                    inputFileField.addEventListener('change', function () {
                    if (this.files && this.files[0]) {
                        var fileInputName = this.getAttribute('name');
                        var img = document.querySelector('img[name="'+fileInputName+'"]'); // $('img')[0]
                        img.src = URL.createObjectURL(this.files[0]); // set src to blob url
                        img.onload = imageIsLoaded;
                    }
                });
            });
           
            }
        });
    </script>
</head>

<body>
    <label class="display-4">Picture 1</label>
    <input type='file' name="row11" required />
    </center>
    </div>

    <div class="form-group">
        <center>
            <img name="row11" src="#" alt="" height=1000 width=1000>
        </center>
    </div>

    <div class="form-group">
        <center>
            <label class="display-4">Picture 2</label>
            <input type='file' name="row12" required />
        </center>
    </div>

    <div class="form-group">
        <center>
            <img name="row12" src="#" alt="" height=1000 width=1000>
        </center>
    </div>
</body>

</html>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370779

You need to iterate over all input[type="file"]s, add a listener to each, and dynamically select the associated img tag:

for (const input of document.querySelectorAll('input[type="file"]')) {
  input.addEventListener('change', function() {
    if (input.files && input.files[0]) {
      const img = input.closest('.form-group').nextElementSibling.querySelector('img');
      img.src = URL.createObjectURL(this.files[0]); // set src to blob url
      img.onload = imageIsLoaded;
    }
  });
}

Upvotes: 0

Related Questions