拖拽时 e.dataTransfer.files 包含隐藏文件是因为浏览器未过滤 .DS_Store、.localized 等系统隐藏文件，其 name 以点开头、size 极小（常为 0 或 68 字节）、type 为空，需组合 name.startsWith('.') 和 size

拖拽时 e.dataTransfer.files 为什么包含隐藏文件

Mac 和 Linux 系统下，用户拖拽整个文件夹或 Finder 中的目录时，e.dataTransfer.files 可能混入 .DS_Store、.localized 或 Thumbs.db 这类隐藏文件。它们 size 很小（常为 0 或 68 字节），但 type 为空字符串，且 name 以点开头。浏览器不主动过滤，全量透出给 JS 处理。

用 Array.from(files) 后逐个判断文件名和大小

不能只靠 file.type 或 file.name.endsWith('.xxx')，因为隐藏文件往往没有扩展名、type 为空、size 极小。必须组合多个条件筛除：

• file.name.startsWith('.') && file.size —— 基本覆盖 macOS/Linux 隐藏文件
• file.size === 0 —— 排除空文件（常见于 Safari 拖入文件夹生成的伪文件）
• !file.name.includes('.') && file.size === 68 —— Safari 文件夹拖入时的典型特征（无扩展名 + 固定 68 字节）
• 避免仅用 file.type 判断：隐藏文件的 type 多为空字符串，不可靠

拖拽场景下别依赖 accept 属性

accept 对拖拽无效——它只影响原生 <input type="file"> 的系统对话框过滤。拖拽是操作系统级行为，浏览器无法在 drop 前拦截隐藏文件。所有过滤逻辑必须放在 drop 事件回调里手动做。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

过滤后记得重新构造 FormData 并校验长度

过滤掉隐藏文件后，files.length 可能变为 0，需提前检查，避免后续上传报错：

立即学习“前端免费学习笔记（深入）”；

const validFiles = Array.from(e.dataTransfer.files).filter(file => {
  return !(file.name.startsWith('.') && file.size <= 68) &&
         !(file.size === 0) &&
         !(file.size === 68 && !file.name.includes('.'));
});
if (validFiles.length === 0) {
  alert('未检测到有效文件，请检查是否拖入了文件夹或隐藏文件');
  return;
}
// 后续 append 到 FormData

真正容易被忽略的是：Safari 拖入文件夹时，files[0] 是那个 68 字节的伪文件，但它会“占位”导致 files.length === 1，而你误以为有真实文件——必须按 name 和 size 双重识别，不能只看 length。