<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;
}
$("#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.readAsText(fileData,"UTF-8");
         reader.addEventListener("load",function(event){
   $("#show").text(event.target.result);
})
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js