时间戳

首页 > 解决方案 > 如何获取拖动文件的文件名（放置前）

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

问题描述

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

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

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

标签： javascriptdrag-and-drop

解决方案

如果您在拖动事件期间需要它，您唯一的选择是 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>

推荐阅读