第二张图片不显示预览

Question

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

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

Answer 1

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

下面是工作示例。

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

Answer 2

您需要遍历所有input[type="file"] ，为每个添加一个侦听器，并动态 select 关联的img标签：

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

第二张图片不显示预览

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-07 06:33:08

解决方案2
0 2020-04-07 06:22:10

第二张图片不显示预览

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-07 06:33:08

解决方案2 0 2020-04-07 06:22:10

解决方案1
1 已采纳 2020-04-07 06:33:08

解决方案2
0 2020-04-07 06:22:10