在上传之前预览多张图片

debugcn 发表于 Dev

丹尼斯·盖通古

对于第一个输入，它运行良好，但对于第二个输入，则效果不佳。而不是更新第二个，它更新第一个。如何使用相同的功能分隔这两个输入预览？

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>

原野高史

首先，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。