在上传之前预览许多图像

Question

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

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>

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

在上传之前预览许多图像

Preview an many image before it is uploaded

javascript

jquery

preview