我被困在试图在页面中显示用户选择的图像的预览(显示多张图像),但是我得到的是,当我选择新图像时,它将替换旧图像
function showImage() {
var fr=new FileReader();
var body = document.getElementById('b');
// when image is loaded, set the src of the image where you want to display it
fr.onload = function(e) {
body.innerHTML+='<img src='+this.result+'>';
};
src.addEventListener("change",function() {
// fill fr with image data
fr.readAsDataURL(src.files[0]);
});
}
showImage();
<!DOCTYPE html>
<html>
<head>
<title>img</title>
<style type="text/css">
img{
width: 50%;
height: 50%;
}
</style>
</head>
<body id="b">
<input type="file" id="src" style="display: block;">
</body>
</html>
这应该为您解决问题。
您应该在输入中添加多个作为属性。
function showImage() {
var fr=new FileReader();
var body = document.getElementById('b');
// when image is loaded, set the src of the image where you want to display it
fr.onload = function(e) {
$('body').append('<img src='+this.result+'>');
};
src.addEventListener("change",function() {
// fill fr with image data
fr.readAsDataURL(src.files[0]);
});
}
showImage();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title>img</title>
<style type="text/css">
img{
width: 50%;
height: 50%;
}
</style>
</head>
<body id="b">
<input type="file" id="src" style="display: block;" multiple>
</body>