ondrop event not firing

上下文：在網頁上工作以便能夠將csv文件拖動到其上並將數據載入到MySQL服務器。在Apache 2.4上運行的Widnows 7 SP1上運行，使用Chrome在本地主機上進行測試。ondrop event not firing

問題：嘗試創建上載頁面，但我無法觸發ondrop事件。根據我的理解，我已經逃脫了默認行爲，但仍然沒有從實況網頁得到任何回覆。我也對ondragenter事件（未顯示）做了同樣的修改。治療是文件通過瀏覽器下載到默認下載文件夾，這也是將文件放到頁面的其餘部分時會發生什麼情況（默認處理？）。我相信拖放API對於大多數瀏覽器來說是本地的，並且不需要任何包含的庫。這是錯誤的，我錯過了一些定義？

代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <style> 
      #drop_zone { 
       background-color: #EEE; 
       border: #999 5px dashed; 
       width: 290px; 
       height: 200px; 
       padding: 8px; 
       font-size: 18px; 
      } 
     </style> 
     <script> 
     function drag_enter(event) { 
      document.getElementById("drop_zone").style.border = "5px dotted red"; 
     function drag_drop(event) { 
      event.preventDefault(); 
      alert(event.dataTransfer.files[0]); 
      alert(event.dataTransfer.files[0].name); 
      alert(event.dataTransfer.files[0].size+" bytes"); 

     </script> 
    </head> 
    <body> 

    <h1>File Upload Drop Zone</h1> 
    <div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" ondragover="return false"></div> 

    </body> 
</html>

其他問題：有人可以在HTML事件主叫什麼參數（稱爲event）傳遞給函數的代表解釋一下嗎？這是特定的事件ID嗎？你可以通過這個來引用事件的來電者嗎？不知道我理解調用者和函數之間關於這個參數的關係。在線文檔通常會對解釋其使用情況進行介紹。

謝謝任何花時間回顧我的問題的人。親切問候，

來源

2016-12-23 nbayly

它看起來就像你在每個函數的末尾缺少一些收}，這樣的：

function drag_enter(event) { 
      document.getElementById("drop_zone").style.border = "5px dotted red"; 
     function drag_drop(event) { 
      event.preventDefault(); 
      alert(event.dataTransfer.files[0]); 
      alert(event.dataTransfer.files[0].name); 
      alert(event.dataTransfer.files[0].size+" bytes");

應該是：

function drag_enter(event) { 
    document.getElementById("drop_zone").style.border = "5px dotted red"; 
} 
function drag_drop(event) { 
    event.preventDefault(); 
    alert(event.dataTransfer.files[0]); 
    alert(event.dataTransfer.files[0].name); 
    alert(event.dataTransfer.files[0].size + " bytes"); 
}

這裏是一個working example

來源

2016-12-23 17:44:56 Pabs123

Boooom，太棒了！考慮到這件事很大，我傷了腦袋。一點細節都有所不同。我將此標記爲正確答案。如果有人有動力回答我的第二個問題，我也會給他們點贊和虛假的互聯網點。 – nbayly

ondrop event not firing

回答

相關問題