拖放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);
}