javascript - 拖放 javascript 事件

Question

我是一名尝试使用 javascript 的 java 人员，需要一些帮助。我在这里遇到了一个关于图像上传的精彩教程 Mozilla Tutorial并需要一些帮助来解决这个问题。我目前正在研究拖放图像上传功能。每次我将图像拖到我的区域时，鼠标都会变成绿色，因此它被激活了。但是当我放手时，它应该会向我发送一条警告，说找到了一张图片。但是它总是只提醒 0。所以数组的大小是 0。有什么想法吗？谢谢参观。我尝试过但没有成功...

1. 将教程中的代码完全复制并粘贴到我的 javascript 文件中
2. 移动代码以将监听器添加到函数外部并加载到窗口中
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);
}

.

更新 - fiddle 结果

Answer 1

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

---

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

试试这个 Fiddle，看看它是否适合你: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);
}