multiple属性仅对type="file"和type="email"有效，前者实现真多选并返回filelist，后者仅放宽校验；ios safari 16.4前不支持多选，须降级处理或动态启用。
multiple 属性本身不提供按钮定制能力
加了 multiple 的 <input type="file"> 仍然是一个原生、丑陋、不可样式化的文件输入框——它没有“按钮”概念，更不响应 CSS 的 button 类选择器。所谓“定制按钮”，本质是用其他元素（比如 <label></label> 或 <div>）视觉遮盖原生 input，并触发它的点击行为。
<h3>用 <code><label></label> 包裹实现可样式化点击区域
这是最轻量、兼容性最好、无需 JS 的方案：
- 把
<input type="file" multiple>放在<label></label>内，或通过for属性关联 - 给
<label></label>加任意样式（背景色、圆角、hover 效果），用户点 label 就等同于点 input - 关键：把原生 input 设为
opacity: 0; position: absolute;，让它不可见但依然可交互 - 别忘了设
display: block或inline-block让 label 响应宽高设置
示例 HTML 片段：
<label class="upload-btn"><br><input type="file" multiple accept="image/*" style="opacity:0;position:absolute;"><br> + 上传多张图片<br></label>
监听 change 事件时必须读 input.files，不是 input.value
用户点了你“定制”的按钮并选完文件后，input.value 仍只返回第一个文件的 fakepath（如 C:\fakepath\photo.jpg），完全不能反映多选结果。真正承载全部文件的是只读的 FileList 对象：
- 必须用
event.target.files获取，不是event.target.value -
files.length才是真实选中数；files[0]可能越界，务必先判空 -
FileList不是数组，不能直接.forEach()，得先转：Array.from(input.files) - 每个
File实例有name、size、type，但file.path永远是undefined
移动端 iOS Safari 16.4 之前会静默失效
哪怕你代码完全正确、按钮样式完美、multiple 显式写了，iOS Safari 在 16.4 之前版本仍会把 <input type="file" multiple> 当成单选处理——input.files.length 永远是 1，且无任何报错或提示。这不是 bug，是平台限制。
- 检测方式：
navigator.userAgent.includes('iPhone') && /OS [1-9]\d?_[0-3]/.test(navigator.userAgent) - 降级方案：对旧 iOS 用户，改用多次单选 + 合并
FileList，或引导使用桌面端 - Android Chrome 和 Firefox 支持良好，微信安卓 WebView 部分版本会降级为单选，需实测
真正麻烦的从来不是怎么写按钮样式，而是如何让 multiple 在不同设备上稳定返回多个文件——这一步没验证清楚，后面所有上传逻辑都会出错。
