上传后显示图片预览

Question

我有一个js代码的输入文件图像预览。当我选择一张图片时，两面都会显示。我怎样才能将它们分开？

​

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader()
    reader.onload = function(e) {
      $(".bruh").attr("src", e.target.result)
    }
    reader.readAsDataURL(input.files[0])
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="photo-select">
  <input type="file" onchange="readURL(this);" />
  <img class="bruh" src="" alt="" />
</label>

<label class="photo-select">
  <input type="file" onchange="readURL(this);" />
  <img class="bruh" src="" alt="" />
</label>

​

Answer 1

您可以通过name将它们分开：

​

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('.bruh'+input.name).attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="photo-select">
  <input type='file' name="First" onchange="readURL(this);" />
  <img class="bruhFirst" src="" alt="" />
</label>
        
<label class="photo-select">
  <input type='file' name="Second" onchange="readURL(this);" />
  <img class="bruhSecond" src="" alt="" />
</label>

​