对于第一个输入,它运行良好,但对于第二个输入,则效果不佳。而不是更新第二个,它更新第一个。如何使用相同的功能分隔这两个输入预览?
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] 删除。
我来说两句