无法通过拖放上传 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
            }
        }
    });