javascript 如果以获取元素ID为条件

p8ekf7hl  于 2023-11-15  发布在  Java
关注(0)|答案(2)|浏览(177)

我有两个用于个人图像和签名图像的输入元素和两个用于显示图像的图像元素
此时通过选择一个图像,两个图像元素显示相同的画面,
每个盒子如何显示与其输入相关的图像,或者换句话说,我如何押注id以显示相应的图像?

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);
});

个字符

bxgwgixi

bxgwgixi1#

你不需要任何if条件。一种方法是这样做的。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);
});

字符串
另一种方法是在函数中添加另一个参数,该参数将传递img元素id。参见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');
});

zaqlnxep

zaqlnxep2#

如果您在input元素上使用dataset属性应用了对img元素的引用,那么一个简单的委托侦听器就可以检查event.target,并轻松地推断出图像选择的结果应该应用于哪个HTML元素。

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] );
    }
  }
})

个字符

相关问题