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

回答

相关问题