在上传之前预览许多图像答案

【问题标题】：Preview an many image before it is uploaded在上传之前预览许多图像
【发布时间】：2020-11-23 10:04:02
【问题描述】：

第一个输入效果很好，但第二个输入效果不好。它不会更新第二个，而是更新第一个。如何将这两个具有相同功能的输入预览分开？

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" onchange="readURL(this);" required>
<img id="load" src="../img/preview.png" alt="loading" width=50 height=50>

<input type="file" onchange="readURL(this);" required>
<img id="load" src="../img/preview.png" alt="loading" width=50 height=50>

【问题讨论】：

什么输入，什么功能？请创建一个Minimal, Reproducible Example

标签： javascript jquery preview

【解决方案1】：

首先，ID 应该是唯一的，因此将 img 元素的“load”设置为“load1”和“load2”。
您应该通过输入来区分输出目标。
$('#blah').attr('src', e.target.result); 始终更新元素“#blah”。
因此，向 readURL() 添加一个参数来指定输出目的地，并修改它以在那里更新。

    function readURL(input, target) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
    
        reader.onload = function(e) {
          $(target).attr('src', e.target.result);
        }
    
        reader.readAsDataURL(input.files[0]); // convert to base64 string
      }
    }

    <input type="file" onchange="readURL(this, '#load1');" required>
    <img id="load1" src="../img/preview.png" alt="loading" width=50 height=50>
    
    <input type="file" onchange="readURL(this, '#load2');" required>
    <img id="load2" src="../img/preview.png" alt="loading" width=50 height=50>

【讨论】：