php - 在 div 容器中启用拖放上传

Question

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

我正在寻找的是一种能够将拖放到我网站上的 div 中的方法。目前，当我将一个文件放入页面(我使用的是 Chrome)时，它会显示该文件(一个 file://url)，这不是我想要的。如果有一种方法可以在不使用任何插件的情况下做到这一点，我会很高兴。它应该支持多个文件。

这是我的 div-css 的样子:

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

这是我为拖动绑定(bind)的 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;
});

感谢所有评论和回答。谢谢!

Answer 1

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

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

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