Question

上下文：在网页上工作，以便能够将csv文件拖放到它上面并将数据加载到MySQL服务器。在Widnows 7 SP1上运行，在Apache 2.4上运行，使用Chrome在localhost上进行测试。

问题：尝试创建上传页面，但我无法触发ondrop事件。我已将默认行为转移到我的理解但仍然没有得到实时网页的响应。我也对ondragenter事件（未显示）做了同样的事情而没有任何变化。处理是文件通过浏览器下载到默认下载文件夹，这也是将文件丢弃到页面其余部分时发生的情况（ergo默认处理？）。我相信拖放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吗？你可以通过这个来推荐活动的来电者吗？我不确定我理解调用者和函数之间关于此参数的关系。在线文档通常会解释其用途。

感谢有人抽空审查我的问题。热烈的问候，

Answer 1

在您的每个功能结束时，您似乎错过了一些结束}，这是：

 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

ondrop事件没有解雇

1 个答案: