i am stuck trying to show preview of user selected images ( show multiple images ) in my page , but what i get is that when i select new image it replace the old one
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>