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"]，向每个监听器添加一个侦听器，并动态选择关联的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;
    }
  });
}

第二张img不显示预览

2 个答案: