如何获取拖动文件的文件名（拖放前）

Question

我想获取从浏览器外部拖拽的文件的文件扩展名。在 Whosebug 上浏览了许多教程和 questions/answers 我似乎没有找到答案（或者我只是愚蠢地搜索正确的术语）。

我知道您可以在 ondrop 事件中访问文件名，但我想根据用户在放下文件之前拖入我的应用程序的文件类型做出反应。必须有某种方式，因为 Webflow（用于构建响应式网站的网络应用程序）正在这样做。根据文件类型，它会为您提供不同类型的元素。

我很感谢在正确方向上的每一个小线索

Answer 1

如果您在 dragover 事件期间需要它，您唯一的选择是 MIME 类型，可以使用 event.dataTransfer.items[n].type 检索。文件的其余信息在放置事件之前不可访问。

请注意 browser compatibility 此功能，因为 Internet Explorer 和 Safari 都不支持此功能。

var dropReceiver = document.getElementById("dropReceiver");

dropReceiver.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    
    for(var i = 0; i < e.dataTransfer.items.length; i++)
    {
        console.log(e.dataTransfer.items[i].type);
    }
});

#dropReceiver
{
padding: 100px 120px;
background: blue;
color: white;
font-size: 30px;
text-align: center;
}

<div id="dropReceiver">Drag On Me</div>

如何获取拖动文件的文件名（拖放前）

How to get the filename of a dragged file (before drop)

javascript

drag-and-drop