正确做法是隐藏原生<input type="file">（推荐position: absolute; left: -9999px），用自定义按钮绑定onclick并调用其.click()方法触发；必须保留可交互性，禁用pointer-events: none，多文件需添加multiple属性。
怎么用 <input type="file"> 触发文件选择但不暴露原生按钮
直接放一个裸 <input type="file"> 会显示丑陋的系统默认按钮，且样式几乎无法统一控制。正确做法是隐藏原生元素，用自定义按钮触发点击事件。
关键点在于：display: none 或 opacity: 0 都可以隐藏，但必须保留其可交互性（不能加 pointer-events: none），否则 .click() 无效。
- 推荐用
position: absolute; left: -9999px隐藏，避免影响布局又确保可触发 - 自定义按钮绑定
onclick并调用fileInput.click()，不要用label[for]—— 它在部分 iOS Safari 下对multiple支持不稳定 - 如果需要支持多文件，务必加
multiple属性，否则即使 JS 调用也只允许选一个
如何在弹窗里预览 Excel/CSV 文件内容（不上传服务器）
用户选完文件后，得立刻看到数据结构，而不是盲目点击“导入”。这靠 FileReader + 解析库完成，核心是避免全量读取大文件卡死主线程。
对于 CSV：用 PapaParse 的 parse(file, { preview: 10 }) 快速读前 10 行；对于 Excel（.xlsx）：用 xlsx 库的 XLSX.read(file, { sheetRows: 10 }) 控制行数。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 别用
readAsText()直接读整个 Excel 文件——二进制格式会报错，必须用readAsArrayBuffer() - 解析前先检查
file.type或后缀名，.xls和.xlsx处理逻辑不同，xlsx库不支持老式.xls - 预览表格建议用纯 HTML
<table>渲染，别套 React/Vue 组件——弹窗场景简单，加框架反而增加首屏延迟
导入前校验字段和格式，怎么写才不漏掉边界情况
用户上传的文件经常字段错位、空行、中文标点逗号、时间格式混用（2024/05/01 vs 2024-05-01）。校验不能只看表头文字是否匹配，得结合类型和样例值。
- 表头校验：用
includes()不够，要some(header => header.trim().toLowerCase().includes('phone'))，兼容空格和大小写 - 手机号列：正则别只写
/^1[3-9]\d{9}$/，得先.replace(/[^0-9]/g, '')清洗括号、短横线、空格 - 日期列：用
Date.parse(str)判断是否有效，但注意'2024-05-32'也会返回 NaN——得额外检查年月日数值合法性 - 必填字段为空：遍历每行，对配置的必填列检查
row[colIndex] == null || row[colIndex].toString().trim() === ''
为什么 fetch 上传文件后接口没收到 FormData 字段
常见错误是没设 Content-Type 请求头。当用 FormData 传文件时，**绝对不能手动设置 Content-Type**，否则浏览器无法自动添加 boundary，后端收不到任何字段。
- 正确写法：
fetch(url, { method: 'POST', body: formData })—— 让浏览器自己设 header - 如果后端要求带 token，加在
headers里，但避开Content-Type：{ headers: { 'Authorization': 'Bearer xxx' } } - Node.js Express 后端记得装
multer，且路由里要先用multer().single('file')或.fields([...])解析，否则req.body和req.file都是空 - 调试技巧：Chrome Network → 点请求 → Headers → 查看 Request Headers 里有没有
Content-Type: multipart/form-data; boundary=xxxx
文件编码、跨域、大文件分片这些属于进阶需求，基础导入弹窗先把上面四点跑通，再考虑断点续传或 Web Worker 解析。
