削除してhtmlファイルをアップロードできません

Question

ボタンをクリックしてファイルをdivにドロップすることで、自分のサーバーにhtmlファイルをアップロードしようとしています。 ボタンをクリックしている間はうまく動作しますが、ドロップの場合は動作しません。

マイHTML

<div class="UploadPnl" id="UploadPnl"> 
<span id="tempUpload" class="glyphicon glyphicon-upload uploadIcon"><br></span> 
<p class="uploadIcon">Upload</p> 
<input id="inputUpload" type="file" class="file" name="files[]" 
    data-preview-file-type="text" style="display: none" accept=".html"> 

私のjQuery：事前にあなたの助けを

$("#UploadPnl").droppable({ 
     drop: function(e, ui) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     $(this).css('border', '2px dotted #0B85A1'); 
     var files = e.originalEvent.dataTransfer.files; 

     //We need to send dropped files to Server 
     alert(files[0]); 
     } 
    }); 

感謝。

Answer 1

もし私がjqueryでそれをしたのであれば動作しませんが、javascriptでそれを実現します。

document.addEventListener("drop", function(event) { 
     event.preventDefault(); 
     if (event.target.className == "UploadPnl") { 
      document.getElementById("UploadPnl").style.color = ""; 
      event.target.style.border = ""; 
      var file = event.dataTransfer.files[0]; 
      var reader = new FileReader(); 
      reader.readAsText(file, "UTF-8"); 
      reader.onload = function (evt) { 
       var fileString = evt.target.result; 
       //processing readed data 
      } 
     } 
    });