Question

我试图检测拖动到浏览器的文件或网址的文件类型。我想检测用户在dragenter和/或dragover事件期间选择的文件类型。

看起来e.dataTransfer.files在拖动输入和拖动事件期间返回长度为0的FileList对象，并且直到文件被填充后才会返回。

在我允许删除文件之前，还有其他方法可以确定实际拖动的文件类型（或设置可以删除的位置）吗？

这是我最初的拖放代码：

if (window.File && window.FileList && window.FileReader) {
    if ((new XMLHttpRequest()).upload) {

        var dragHandler = {}, thisObj = undefined;
        dragHandler.IsOver = false;
        dragHandler.DragEnter = function (e) {
            e.preventDefault();
            if (e.dataTransfer.effectAllowed == "move") return;
            dragHandler.IsOver = true;
            setTimeout(function(){dragHandler.IsOver=false},0);
            document.body.className = "drag-over";
            console.log(e.dataTransfer.files); // an empty FileList :(
        };
        dragHandler.DragOver = function (e) {
            e.preventDefault();
        };
        dragHandler.DragLeave = function (e) {
            if (e.dataTransfer.effectAllowed == "move") return;
            if (!dragHandler.IsOver) {
                document.body.className = "";
            }
            dragHandler.IsOver = false;
        };
        dragHandler.Drop = function (e) {
            e.preventDefault();
            if (e.dataTransfer.effectAllowed == "move") return; // came from Sortable
            dragHandler.IsOver = false;
            $body.removeClass("drag-over");
            if (e.dataTransfer.files.length) {
                for (var i=0;i<e.dataTransfer.files.length;i++) {
                    console.log("File drop " + i, e.dataTransfer.files[i]);
                }
            } else { // dropped an url or a text selection or something else
                console.log("text/plain", e.dataTransfer.getData("text/plain"));
                console.log("text/html", e.dataTransfer.getData("text/html"));
                console.log("url", e.dataTransfer.getData("url"));
                console.log("text/uri-list", e.dataTransfer.getData("text/uri-list"));
            }
        }
        dragHandler.DragStart = function (e) {
            e.dataTransfer.effectAllowed = "move"; // don't let internal links self-drop
        }
        body.addEventListener("dragenter", dragHandler.DragEnter, false);
        body.addEventListener("dragover", dragHandler.DragOver, false);
        body.addEventListener("dragleave", dragHandler.DragLeave, false);
        body.addEventListener("drop", dragHandler.Drop, false);
        body.addEventListener("dragstart", dragHandler.DragStart, false);
    }
}

Answer 1

正如this answer中所述，只有drop事件才有一个e.dataTransfer.files包含实际文件。如果要检查拖动的项目类型，可以使用包含DataTransferItem个具有e.dataTransfer.items属性的type。

拖动到浏览器并检测正在删除的文件的mime

1 个答案: