Php 在div容器中启用拖放上载

我肯定有几个问题与这个问题类似，但我不知道该搜索什么

我正在寻找的是一种方法，使拖放到我的网站上的一个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;
});

函数processFileUpload（droppedFiles）
{
var uploadFormData=新FormData（$（“#dnd”）[0]）；
如果（droppedFiles.length>0）
{
对于（f=0；f

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

看起来必须取消dragover事件才能触发drop事件。
要解决此问题，只需添加以下内容：

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

下面是我根据您的代码制作的一个工作示例：

---

您可以在控制台输出中看到文件。

怎么样：@Dagon谢谢您的评论，但我自己的PHP上传脚本工作正常（在拖放页面上有一个按钮）。我只需要弄清楚如何使div允许拖放和

e.preventDefault（）

到您的drop回调。@MetodMedja没有做任何事情。谢谢你的评论！小提琴就像你说的那样工作，但是在我把它安装到我的网站上之后就不工作了。我错过什么了吗？只需在脚本之前包含jQuery，并将

函数上传

更改为

函数处理文件上传

。谢谢。虽然它仍然将我带到文件的文件：//url.Ok，但我复制了您的代码并找到了解决方案。在第32行将

if（file.length>0）

更改为

if（files.length>0）

（对不起，我的错）并在

$（'#dnd'）之后。绑定（'drop'，function（）{

add

event.preventDefault（）；

返回false；

这次不会删除它。工作！非常感谢您的帮助。非常感谢。