仅使用javascript在提交(php)之前显示所选图像的预览

问题描述 投票:0回答:1

我被困在试图在页面中显示用户选择的图像的预览(显示多张图像),但是我得到的是,当我选择新图像时,它将替换旧图像

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>
javascript
1个回答
0
投票

这应该为您解决问题。

您应该在输入中添加多个作为属性。

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>
© www.soinside.com 2019 - 2024. All rights reserved.