<input type="file" id="upload">
<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(e){
var fileData = e.target.files[0]
//讀取檔案內容
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.