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

感谢所有评论和答案。谢谢！

Answer 1

似乎必须取消 dragover 事件才能触发 drop 事件。
要修复它，只需添加：

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

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

在div容器中启用拖放上载

1 个答案: