Question 284552 in Html Question posted in
Some basic documentation can be found here.

Html – if condition by get element id

I have two input element for personal image and signature image and two image element for display images

At the moment by selecting a image, both image element display the same picture,

How can each box display the image related to its input, or in other words, how can I bet on the id to display the corresponding image?

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      // place of if condition base of element id for uploading related image

      $('#person').attr('src', e.target.result);
      $('#emza').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}
$("#imgInput").change(function() {
  readURL(this);
});
$("#emzaInput").change(function() {
  readURL(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-4">
  <div class="col-auto p-1 col-3">
    <label class="col-form-labels">personal image</label>
  </div>
  <div class="col-auto p-1 col-5">
    <input class="myform-control" type="file" id="imgInput">
  </div>
  <div class="col-auto p-1 col-4">
    <img id="person" src="..." class="img-thumbnail float-end rounded" alt="...">
  </div>
  <div class="col-4" style="display: flex; flex-direction: row;">
    <div class="col-auto p-2">
      <label class="col-form-labels">signiture image</label>
    </div>
    <div class="col-auto p-2">
      <input class="myform-control" type="file" id="emzaInput">
    </div>
    <div class="col-auto p-2">
      <img id="emza" src="..." class="img-thumbnail float-end rounded" alt="...">
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    If you applied a reference to the img element, using a dataset attribute, on the input element then a simple delegated listener could inspect the event.target and easily deduce to which HTML element the results of the image selection should be applied. That keeps the Javascript free from hardcoded ID attributes and means it could be scaled to any number of input/img pairs

    document.addEventListener('input',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='file' ){
    if( e.target.dataset.img!=null && e.target.files ){
      let img=document.querySelector(`img#${e.target.dataset.img}`);
      let reader=new FileReader();
          reader.onload=function(e) {
            img.src=this.result;
          };
          reader.readAsDataURL( e.target.files[0] );
    }
  }
})
    <div class="col-4">
  <div class="col-auto p-1 col-3">
    <label class="col-form-labels">Personal image</label>
  </div>
  <div class="col-auto p-1 col-5">
    <input class="myform-control" type="file" data-img='person'>
  </div>
  <div class="col-auto p-1 col-4">
    <img id="person" class="img-thumbnail float-end rounded" alt="...">
  </div>

  <div class="col-4" style="display: flex; flex-direction: row;">
    <div class="col-auto p-2">
      <label class="col-form-labels">Signature image</label>
    </div>
    <div class="col-auto p-2">
      <input class="myform-control" type="file" data-img='emza'>
    </div>
    <div class="col-auto p-2">
      <img id="emza" class="img-thumbnail float-end rounded" alt="...">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You dont need any if condition.
    One way to do this like this. jsfiddle here

    function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $(input).closest('div').siblings('.imgDiv').find('img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}
$("#imgInput, #emzaInput").change(function(){
  readURL(this);
});

    Other approach is by adding another parameter in function that will pass img element id. see here

    function readURL(input, imgID) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#' + imgID).attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}
$("#imgInput").change(function(){
  readURL(this, 'person');
});
$("#emzaInput").change(function(){
  readURL(this, 'emza');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search