原生配合css隐藏与自定义ui，监听change事件动态展示文件名及删除按钮，用filelist管理附件状态，上传延迟至表单提交时通过formdata.append逐个添加文件，兼顾多选、预览、校验与兼容性。
HTML里用 <input type="file"> 就能模拟邮箱附件上传效果
不需要额外框架或复杂 JS，原生 <input type="file"> 配合一点样式和交互就能接近 Gmail 或 Outlook 的附件体验。关键不是“上传”，而是“选中后立即展示文件名 + 删除按钮”，上传动作可以延迟到表单提交时再触发。
怎么让文件输入框看起来像邮箱附件栏（无默认按钮+多文件）
浏览器默认的 <input type="file"> 样式丑、文字固定、不支持多选展示——得隐藏它，用自定义元素接管 UI：
- 加
multiple属性允许一次选多个文件：<input type="file" multiple> - 用 CSS 把原生 input 透明化并覆盖在自定义按钮/区域上（常用
opacity: 0; position: absolute;） - 监听
change事件，读取event.target.files列表，动态生成带文件名和 × 按钮的标签 - 每个附件标签绑定点击事件，调用
URL.createObjectURL(file)可预览（如图片），但注意内存泄漏：用完要URL.revokeObjectURL()
event.target.files 和 FormData 怎么配合真正上传
用户点“发送”时才真正发请求，这时把所有已选文件塞进 FormData 即可。别在选中时就上传——邮箱场景里附件可删、可重选，上传应是最终提交动作：
-
FormData.append("attachment", file)每个文件单独 append，后端按 name 接收（支持同名多次） - 如果需保留原始顺序，
event.target.files是FileList，不是数组，得先转成数组：Array.from(event.target.files) - 上传前可校验大小：
file.size > 25 * 1024 * 1024（限制 25MB），避免大文件卡住 UI - 用
fetch提交时，直接传formData，不要设Content-Type头——浏览器会自动设置带 boundary 的multipart/form-data
容易被忽略的兼容性和体验细节
看似简单，但这些地方一错就卡住用户：
- 移动端 Safari 对
input[type="file"]的capture和accept支持不稳定，比如accept="image/*"在 iOS 可能仍允许选视频，得 JS 层二次过滤file.type - 删除某个附件后，别直接从
FileList里 splice ——它是只读类数组，只能清空 input 再重新赋值（或维护自己独立的filesArray状态） - IE11 不支持
URL.createObjectURL对非图片文件（如 PDF）生成预览链接，要降级显示文件名+图标 - 如果页面有多个附件区域，确保每个
<input type="file">的name或 ID 唯一，否则事件监听可能混乱
真正的难点不在“怎么上传”，而在“怎么管理已选文件的状态生命周期”——从选中、展示、删减、校验到最终打包，每一步都得和用户操作同步，且不能依赖 DOM 节点存状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
