如何在拖放前获取被拖动文件的文件名

Question

我想获取从浏览器外部拖动的文件的文件扩展名。查看了许多教程和StackOverflow上的问题/答案，但似乎找不到答案（或者我只是太愚蠢了，没用正确的搜索词汇）。我知道您可以在ondrop事件中访问文件名，但在用户放下文件之前，我想根据用户拖入我的应用程序的文件类型做出反应。应该有某种方法，因为Webflow（一个构建响应式网站的Web应用程序）就是这样做的。根据文件类型，它会给您不同类型的元素。感谢您提供的任何指导。

- skillmotion

---

event.dataTransfer.files[n].type 将包含正在上传的文件的 MIME 类型，例如 image/png 或 text/plain，而 event.dataTransfer.files[n].name 将包含文件名。 - Liftoff

谢谢，但这在“dragover”事件中不起作用，只有在“drop”事件中才有效，而我想避免这种情况。 - skillmotion

Answer 1

如果你想在拖动事件期间获取文件类型，唯一的选择是使用MIME类型，可以通过event.dataTransfer.items[n].type获取。文件的其余信息直到放置事件时才能访问。

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

- Liftoff

---

非常感谢！它完美地运行了！你让我的一天变得美好 :) - skillmotion

很高兴能帮忙 :) - Liftoff

这个答案非常有帮助，尽管它说'n'未定义，即event.dataTransfer.items[n].type，所以你可能想把[n]改成[0]。这对我有效。 - Chidiebere Ezeokwelume