<div id="dragzone" class="zone">拖曳上傳</div>
<div id="show" class="show"></div>.zone{
width: 500px;
height: 300px;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
.show{
width: 400px;
height: 300px;
background: #eee;
}
.thumb{
width: 50px;
margin: 10px;
box-shadow: 0 0 5px #333;
}$("#dragzone").on({
"dragover": function(event){
event.preventDefault();
},
"drop": function(event){
event.preventDefault()
event.stopPropagation()
let fileData=event.originalEvent.dataTransfer.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.