点击图标触发文件输入需用label绑定而非js调click()；替换同名文件前须清空input.value；预览用filereader读取dataurl；上传时注意文件名和content-type校验。
点击图标触发文件输入框的 click() 方法
浏览器禁止 JavaScript 直接调用 <input type="file"> 的 click()，除非该调用由用户手势（如 click、touchend）同步触发。所以不能在异步回调或定时器里调 click()，否则静默失败。
正确做法是把图标（比如一个 <i class="icon-upload"></i>）和隐藏的 <input type="file"> 绑定在同一个事件流里：
<label class="upload-trigger"> <i class="icon-replace"></i> <input type="file" id="fileInput" accept="image/*" style="display:none"></label>
这样点击图标就等于点击了 label，自动激活关联的 input —— 不需要 JS 调 click()，也规避了跨浏览器兼容问题。
替换文件时清空 input.value 防止 same-file 无变化
如果用户重复选择同一个文件（比如点图标 → 选 a.jpg → 再点图标 → 又选 a.jpg），change 事件不会触发，因为 input.value 没变。这是浏览器原生行为，不是 bug。
解决方法是在每次触发前手动清空 value：
document.getElementById('fileInput').addEventListener('click', function() {
this.value = ''; // 关键：重置 value，确保 change 总能触发
});
- 必须在
click事件里清，不能在change后清（否则下次点图标时还没清） - 不要用
setAttribute('value', '')，它不生效；必须赋值this.value = '' - 如果用了 FormData 或 FileReader，记得在
change回调里重新读取e.target.files[0]
用 FileReader 预览替换后的图片（非必需但常用）
上传前预览新文件，需监听 change 并用 FileReader 读取 blob URL。注意：旧预览图要先清除，否则可能残留。
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const preview = document.getElementById('previewImg');
const reader = new FileReader();
reader.onload = function() {
preview.src = reader.result; // 替换 src 即可，不用 remove + append
};
reader.readAsDataURL(file);
});
-
FileReader是异步的，别在onload外直接用reader.result - 如果支持多图，
e.target.files是FileList，需遍历；单图场景只取[0] - 部分老 Android WebView 对
readAsDataURL支持不稳定，可降级为readAsArrayBuffer+ Blob URL
后端接收时注意文件名与 content-type
前端替换文件后，FormData.append('file', file) 发送的仍是新文件，但服务端若依赖原始 filename 或 Content-Type 做校验，可能出问题。
- 浏览器自动设置
Content-Type，但某些文件扩展名缺失时会 fallback 为application/octet-stream - 如果后端用文件头（magic number）判断类型，那没问题；如果只看扩展名，需确保前端传的
file.name合法（比如用户改过扩展名） - 上传前可加简单校验：
if (!file.name.toLowerCase().endsWith('.jpg')) { alert('仅支持 JPG'); return; }
真正容易被忽略的是：替换操作本身不改变表单其他字段状态，比如已填的描述文本、勾选的复选框。这些得靠业务逻辑自己维护，HTML 不会自动“重置”它们。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
