拖动到浏览器并检测被删除的文件的 mime答案

【问题标题】：drag to browser and detect mime of file being dropped拖动到浏览器并检测被删除的文件的 mime
【发布时间】：2017-12-13 19:20:35
【问题描述】：

我正在尝试检测被拖动到浏览器的文件或 url 的文件类型。我想检测用户在 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);
    }
}

【问题讨论】：

stackoverflow.com/questions/11065803/… 。阅读第一个和第二个答案
我自己试试看，会随时通知你。
whatwg 说：如果在应用程序外部启动拖动，用户代理必须根据被拖动的数据将项目添加到拖动数据存储项目列表中，遵守平台约定适当的 [...] 并且在任何情况下，所有拖动数据项类型字符串都必须转换为 ASCII 小写。 - 但MDN 表示该属性处于受保护模式。这对我来说似乎是错误的 - 只读会很有用。

标签： javascript drag-and-drop

【解决方案1】：

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

【讨论】：