拖放javascript事件

Question

我是一个尝试javascript的java手，需要一些帮助。 我在Mozilla教程中遇到了一个关于图像上传的惊人教程，需要一些帮助才能搞清楚。 我目前正在处理拖放图像上传功能。 每次我将图像拖到我的区域时，鼠标都会变为绿色，因此它会被激活。 但是当我放手时，它应该向我发送一条警报，说明找到了一张图片。 然而，它总是只提醒0.所以数组的大小是0.任何想法？ 谢谢参观。 我尝试过但没有成功......

1. 将教程中的代码复制并粘贴到我的javascript文件中
2. 移动代码以将侦听器添加到函数之外并进入窗口onload
3. 我的每个浏览器

...

function toggleStrideMedia()
{
    if(getDisplay("strideMediaWrapper") == "" || getDisplay("strideMediaWrapper") == "none")
    {
        show("strideMediaWrapper");

        getElement("strideMediaDropZone").addEventListener("dragenter", dragenter, false);
        getElement("strideMediaDropZone").addEventListener("dragover", dragover, false);
        getElement("strideMediaDropZone").addEventListener("drop", drop, false);

    }
    else
    {
        hide("strideMediaWrapper");
    }
}

function dragenter(e) 
{
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) 
{
    e.stopPropagation();
    e.preventDefault();
} 

function drop(e) 
{
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    // THIS SHOULD BE GIVING ME A ONE BUT IT ALWAYS GIVES ME A ZERO INSTEAD
    alert(files.length);

    handleFiles(files);
}

。

更新 - 小提琴结果

Answer 1

UPDATE
实际问题是，如果您尝试将图像直接从一个Web浏览器选项卡拖动到此基于Web的拖放界面，则该事件将触发但不会删除任何文件。 提问者在OSX上注意到了这个问题，我能够在Windows 7中复制相同的行为。

---

如果没有看到您的HTML，很难说出您遇到的困难。 如果没有正确设置ondragover / ondragenter部分，那么删除将不起作用，但您根本看不到警报，您只是看到浏览器从本地文件系统渲染图像。 这也意味着您几乎肯定会成功将drop事件添加到正确的元素中。

试试这个小提琴，看看它是否适合你： http ： //jsfiddle.net/qey9G/4/

HTML

<div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; 
                                  border:1px dotted grey;">
               Drag & drop your file here...
        </div>
</div>

JavaScript的

var dropzone = document.getElementById("dropzone");

dropzone.ondragover = dropzone.ondragenter = function(event) {
    event.stopPropagation();
    event.preventDefault();
}

dropzone.ondrop= function drop(e) 
{
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    alert(files.length);
}