Javascript 第二个img不显示预览

有两种输入文件类型，每种类型都有相应的图像显示。显示图片1肯定有效，但当在图片2中添加另一张图片时，它不会显示任何图片。附加的javascript代码是否只支持1种输入文件类型

HTML

您需要迭代所有输入[type=file]，为每个输入添加一个侦听器，并动态选择关联的img标记：

document.querySelector'input[type=file]'将返回页面中的第一个元素。使用querySelectorAll获取所有输入文件字段。此外，您还需要获取相邻的图像标记以显示选定的图像。输入文件标记和img标记使用相同的名称。因此，基于您的代码，我从所选的输入文件名属性中获取img标记

下面是工作示例

班 window.addEventListener'load'，函数{ var fileInputs=document.queryselectoral'input[type=file]； 如果fileInputs&&fileInputs.length>0{ fileInputs.forEachfunctioninputFileField{ inputFileField.addEventListener'change'，函数{ 如果this.files&&this.files[0]{ var fileInputName=this.getAttribute'name'； var img=document.querySelector'img[name='+fileInputName+']；//$'img'[0] img.src=URL.createObjectURLthis.files[0]；//将src设置为blob URL img.onload=图像已加载； } }; }; } }; 图1 图2

---

querySelector仅选择单个元素。您需要querySelectorAll和一个循环来将侦听器附加到所有输入。也不要使用标记，它已被弃用。改用CSS。文本对齐：以YOUR表单组为中心。@Teemu，难怪是aight。@cloned，Noted将进行一些修改。Noted。谢谢prathameshk73！

<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>

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

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