event.dataTransfer.files.length就是准确的拖拽文件总数，但必须在dragover和drop事件中均调用e.preventDefault()才能获取；它为只读FileList，不支持forEach，需用for循环或Array.from()遍历；移动端不支持，应降级为。
拖拽时 event.dataTransfer.files.length 就是总数
用户把多个文件拖进页面，只要在 drop 事件里读 event.dataTransfer.files.length，就是准确的总数量。它和 <input type="file" multiple> 的 files.length 行为完全一致，都是只读的 FileList 对象。
关键前提是：必须在 dragover 和 drop 两个事件里都调用 e.preventDefault()，否则浏览器会拒绝暴露 dataTransfer.files，返回空列表（length === 0）。
- 别只监听
change—— 那是 input 框的事件，拖拽时根本不会触发 - 别试图用
event.dataTransfer.items替代 —— 它更复杂、兼容性差，且某些浏览器（如旧版 Safari）不填files时items也为空 - 即使用户拖了 0 个文件（比如中途取消），
files.length也是0，不用额外判空或检查是否为null
files 是只读类数组，不能直接用 forEach
常见错误是写 event.dataTransfer.files.forEach(...)，会报 TypeError: files.forEach is not a function。因为 FileList 不是数组，没有 Array.prototype 上的方法。
- 最稳妥：用传统
for循环遍历files[i]，零兼容风险 - ES6+ 可用
Array.from(files).forEach(...)，适合需要链式操作的场景 - 避免
[...files].map(...)—— IE 不支持扩展运算符，且大文件列表下创建新数组有内存开销
移动端拖拽不生效？不是代码问题，是平台限制
iOS 和 Android 原生 WebView 几乎都不支持 dataTransfer.files，哪怕你加了所有 preventDefault 也没用。这不是 bug，是规范未强制要求实现。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 不要在移动端尝试“修复”拖拽多文件计数 —— 它本就不该工作
- 移动端应降级回
<input type="file" multiple>，这是唯一可靠路径 - 若需统一 UI，可检测
typeof window.ontouchstart !== 'undefined'自动切换交互方式
为什么有时 length 总是 1？检查这三点
如果反复测试发现 files.length 永远是 1，大概率是以下某处没做对：
-
dragover事件里漏了e.preventDefault()—— 这是最常见原因，浏览器因此屏蔽files - 目标元素没有设置
drop监听，或监听绑在了父容器但被子元素事件冒泡干扰 - 用户实际只拖了一个文件（比如 macOS Finder 中未按 Cmd 多选就直接拖），而不是浏览器限制
真正难处理的不是计数本身，而是确保拖放上下文完整激活——少一个 preventDefault，整个 files 就不可见。
