拖到浏览器并检测文件被丢弃的MIME

Question

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

看起来e.dataTransfer.files在拖动输入和拖动事件期间返回一个 length=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

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