原生<input type="file" multiple>仅支持批量选择，完整文件管理需JavaScript实现预览、删选、排序及上传反馈；后端接收多文件须设enctype="multipart/form-data"且name为数组格式（如name="images[]"），客户端用FileList和FileReader维护可变文件列表并逐个append至FormData。
直接用 <input type="file" multiple> 就能实现批量选择，但“管理”二字意味着要支持预览、删选、顺序调整、上传状态反馈——这些原生表单做不到，必须配合 JavaScript 和合理的 DOM 结构。
HTML 表单必须带 enctype="multipart/form-data" 且 name 是数组形式
这是后端能收到多个文件的前提。如果 name 写成 name="image"，PHP/Node.js/Laravel 等框架只会取到最后一个文件；写成 name="images[]" 才会解析为数组。
-
enctype="multipart/form-data"缺失会导致文件字段为空，$_FILES或req.files里完全找不到数据 - 多个
<input type="file">标签（比如一个封面 + 多张图）要区分 name：封面用name="cover"，图组用name="photos[]" -
accept="image/*"是提示性属性，不能替代后端 MIME 类型校验，但能减少用户误选非图文件
用 FileList 和 FileReader 做客户端预览与删选
用户点选后，event.target.files 返回的是只读的 FileList，不能直接删项。想支持“点击 X 删除某张预览图”，得自己维护一个可变数组。
- 别直接用
Array.from(files)后 push/pop —— 这样删掉的是副本，下次再选文件时仍会覆盖整个列表 - 正确做法：初始化一个空数组
let pendingFiles = []，每次 change 事件中把新选的files逐个push进去，并生成预览img元素，同时给每个img绑定删除按钮，点击时从数组中splice对应索引 - 预览用
reader.readAsDataURL(file)，不要用URL.createObjectURL()—— 后者需手动revoke，否则内存泄漏
上传时必须用 FormData 逐个 append，不能直接传 files 数组
FormData 不会自动展开数组，formData.append('images[]', files) 实际只传了第一个文件。必须遍历处理。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
formData.append('images[]', files)→ 后端只收到 1 个文件 - 正确写法：
Array.from(pendingFiles).forEach((file, i) => formData.append('images[' + i + ']', file)) - 如果后端是 Laravel，
request()->file('images')要求 name 是images[]，且前端 append 的 key 必须严格匹配（包括方括号） - 加上传进度监听？得用
XMLHttpRequest.upload.onprogress，fetch目前不支持原生上传进度
多个上传组件共存时，ID 冲突会让 JS 只操作第一个
常见翻车现场：页面上有 3 个独立的图片上传区，都写了 id="preview" 和 id="file-input"。结果无论点哪个，只有第一个区域响应。
- 解决办法：全部改用
class，例如class="preview-area"和class="file-input-trigger" - JS 中用
document.querySelectorAll('.file-input-trigger')获取全部触发器，再用el.closest('.upload-section')定位所属容器，确保操作范围隔离 - 每个预览图的删除按钮，事件委托要绑定在容器上，而不是全局 document，避免误触发
真正难的不是“怎么传上去”，而是“怎么让用户清楚地知道自己选了什么、删了什么、哪张传失败了、哪张还在排队”。这些细节没处理好，批量上传就只是把 bug 批量放大而已。
