上传按钮图标切换需用JavaScript监听file input的change事件，通过files.length判断状态并操作label内图标元素的class，原生input必须隐藏且不可样式化。
上传按钮的图标切换依赖状态而非纯HTML
HTML本身不支持动态行为，<input type="file"> 无法直接绑定图标变化。必须配合JavaScript监听文件选择事件，并操作按钮容器（比如<label>或<button>）内的图标元素。常见错误是试图给<input>加class或修改value来驱动图标——它不可见、不可样式化，且value在部分浏览器中无法可靠读取路径（出于安全限制）。
推荐结构：用<label>包裹隐藏的<input type="file">，再在<label>内放一个可替换的图标元素（如<i>、<svg>或<span>）。
用change事件监听选择并切换图标
change是唯一可靠触发时机——用户真正选中文件后才触发，避免click或focus等误判。注意：清空文件（如再次点击选择“取消”）时，input.files.length会变为0，需处理回退逻辑。
- 用
input.addEventListener('change', handler)，不要用onclick属性 - 检查
input.files.length > 0判断是否已选文件 - 图标切换建议用class控制（如
icon-upload→icon-check），而非直接写死innerHTML - 若用
<svg>，可提前定义两套<symbol>，通过<use href="#upload">和<use href="#check">切换
const fileInput = document.querySelector('input[type="file"]');
const iconEl = document.querySelector('.upload-icon');
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) {
iconEl.classList.replace('icon-upload', 'icon-check');
} else {
iconEl.classList.replace('icon-check', 'icon-upload');
}
});
CSS隐藏原生input，用label模拟按钮
原生<input type="file">样式无法跨浏览器统一控制，必须隐藏它，把交互委托给<label>。关键点：label的for属性必须匹配input的id，或直接包裹input；同时设置input为display: none或position: absolute; clip: rect(0 0 0 0)（后者更利于无障碍访问）。
立即学习“前端免费学习笔记（深入）”；
- 不要用
visibility: hidden或opacity: 0——某些浏览器仍会触发默认样式干扰 -
label上设cursor: pointer，明确提示可点击 - 图标font（如Font Awesome）需确保加载完成后再执行JS，否则
classList.replace()可能无效
注意移动端文件输入的兼容性细节
Android Chrome和iOS Safari对input.files的处理基本一致，但有两点易踩坑：
- iOS Safari在用户取消选择后，
input.files.length有时仍为1（残留上次值），需手动重置input.value = ''来清空状态 - 部分安卓机型（尤其旧版）不触发
change事件，如果用户点击“取消”，可补充监听blur并结合setTimeout延时检测files.length - 图标切换后，建议同步更新
aria-label（如从“上传文件”改为“已选择1个文件”），这对屏幕阅读器用户很重要
动态图标本质是状态反馈，重点不在动效多炫，而在准确反映files.length的真实变化——这个值才是唯一可信的依据，其他任何UI表现都只是它的投影。
