在上传之前预览许多图像

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应该是unieque，所以设置"负载"；至"；load1"；以及"；负载2"；img元素
您应该根据输入来区分输出目标
$('#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>