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

HTML Text Extract

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

下载

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

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

files[0]

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！