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

Question

我想获取从浏览器外部拖动的文件的文件扩展名。浏览 StackOverflow 上的许多教程和问题/答案，我似乎找不到答案（或者我只是愚蠢地搜索正确的术语）。

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

我感谢每一个朝着正确方向前进的小引导

Answer 1

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

请注意此功能的浏览器兼容性，因为 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>