<input type="file" id="upload" multiple>
<div id="show" class="show"></div>.show{
width: 400px;
height: 300px;
background: #eee;
}
.thumb{
width: 50px;
margin: 10px;
box-shadow: 0 0 5px #333;
}$("#upload").change(function(event){
let fileCount=event.target.files.length;
for (var i = 0; i < fileCount; i++) {
let fileData=event.target.files[i];
var reader = new FileReader();
reader.readAsDataURL(fileData);
reader.addEventListener("load",function(event){
$("#show").append(`<img class="thumb" src="${event.target.result}">`);
})
}
})
External CSS
This Pen doesn't use any external CSS resources.