在 div 容器中启用拖放上传

Question

我确定有几个问题与此类似，但我不知道要搜索什么。

我正在寻找一种在我的网站上启用拖放到 div 的方法。目前，当我将文件放入页面（我正在使用 Chrome）时，它会显示不是我想要的文件（文件：// url）。如果有办法在不使用任何插件的情况下做到这一点，我会更高兴。它应该支持多个文件。

这就是我的 div-css 的样子：

#dnd {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;  
}

这是我用于拖动的 jQuery 绑定：

function processFileUpload(droppedFiles)
{
    var uploadFormData = new FormData($("#dnd")[0]); 
    if(droppedFiles.length > 0)
    {
        for(f = 0; f < droppedFiles.length; f++)
        {
            uploadFormData.append("upload[]",droppedFiles[f]);
        }
    }

    $.ajax({
        url : "index.php",
        type : "POST",
        data : uploadFormData,
        cache : false,
        contentType : false,
        processData : false
    });
}

$("#dnd").bind("dragenter", function() {
    $(this).css("background", "#8c8c8c");
    return false;
});

$("#dnd").bind("dragleave", function() {
    $(this).css("background", "#c9c9c9");
    return false;
});

$("#dnd").bind("drop", function(e) {
    files = e.dataTransfer.files;
    processFileUpload(files);
    return false;
});

感谢所有 cmets 和答案。谢谢！

Answer 1

看起来必须取消 dragover 事件才能触发 drop 事件。
要修复它，只需添加以下内容：

$("#dnd").bind('dragover', function() {
    return false;
});

这是我按照您的代码制作的一个工作示例： http://jsfiddle.net/hmf4T/
您可以在控制台输出中看到文件。