文件管理网页开发需求：Hover元素时获取文件名而非Drop时

我刚好碰到过类似的需求，浏览器的安全限制确实会在拖拽悬停阶段添点小麻烦，不过现在主流浏览器已经支持在悬停时获取文件名了，给你分享下可行的方案：

核心原因与解决方案 #

浏览器出于隐私安全考虑，默认在dragenter（初次悬停）阶段可能不会完全暴露文件的元数据，但在dragover（持续悬停）事件中，我们可以通过dataTransfer.items的getAsFile()方法拿到完整的文件对象，进而获取文件名。一定要记得阻止事件默认行为，否则浏览器会接管拖拽流程，导致无法访问文件数据。

代码示例 #

假设你的目标元素ID是file-drop-area，可以这样实现：

const dropArea = document.getElementById('file-drop-area');

// 监听dragover事件（持续悬停时触发）
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault(); // 关键：阻止默认拖拽行为
  e.stopPropagation();

  const transfer = e.dataTransfer;
  if (!transfer?.items) return;

  // 遍历所有拖拽的文件项
  for (const item of transfer.items) {
    if (item.kind === 'file') {
      const file = item.getAsFile();
      if (file) {
        console.log('当前悬停的文件名:', file.name);
        console.log('文件类型:', file.type);
        // 这里可以把文件名渲染到页面上，比如：
        // dropArea.textContent = `悬停文件：${file.name}`;
      }
    }
  }
});

// 可选：监听dragleave事件，清除显示的文件名
dropArea.addEventListener('dragleave', () => {
  dropArea.textContent = '拖拽文件到这里';
});

注意事项 #

• 兼容性：Chrome、Firefox、Edge等现代浏览器都支持这个方法，但旧版Safari可能存在限制，建议做兼容性判断。
• 隐私模式：部分浏览器的隐私模式下，悬停阶段获取文件名可能会被阻止，这种情况可以提示用户完成拖拽操作后查看文件名作为降级方案。
• 多文件拖拽：如果用户同时拖拽多个文件，上面的代码会遍历所有文件，你可以根据需求只显示第一个或者全部文件名。

内容的提问来源于stack exchange，提问作者Maxlisui