原生支持 disabled 属性，禁用后不可点击、无焦点、不触发事件、不提交数据，且 files 和 value 均为空；readonly 对其无效。
直接给 <input type="file"> 加 disabled 属性就能禁用，它和其他表单控件一样原生支持该属性，禁用后用户无法点击、无法选择文件，且提交时该字段不会出现在 FormData 中。
为什么 disabled 对 <input type="file"> 有效
<input type="file"> 属于原生可交互表单控件，明确在 HTML 规范支持 disabled 的列表中。加了就生效，不需要额外封装或 hack。
- 浏览器会自动灰显控件、禁用点击区域（包括“选择文件”按钮和拖拽区）
- 键盘焦点无法进入（
Tab跳过）、不响应click或drop事件 - 即使 DOM 中已有
value（比如之前选过文件），禁用后 JS 读inputEl.value仍返回空字符串，且inputEl.files为FileList { length: 0 } - 提交时完全被排除：无论是
form.submit()、new FormData(form)还是URLSearchParams序列化，都找不到这个字段
JS 动态控制 disabled 的正确写法
别用 setAttribute('disabled', '') 或 removeAttribute('disabled') —— 它们在部分旧版 Safari 或 Shadow DOM 场景下行为不一致，且无法保证 UI 立即重绘。
- 禁用：
fileInput.disabled = true - 启用：
fileInput.disabled = false - 检查状态：
if (fileInput.disabled) { ... }（不是hasAttribute） - 若控件由 Vue/React 渲染，必须同步更新响应式数据，否则下次 re-render 会把
.disabled = false覆盖掉
常见误用：用 readonly 替代 disabled
readonly 对 <input type="file"> **完全无效** —— 浏览器忽略该属性，控件照常可点击、可选文件、可提交。这是高频翻车点。
- 想“显示已选文件但不让改”？
readonly不行，得靠 CSS +pointer-events: none+ 阻止事件，但语义错误、无障碍不友好 - 真正需要“锁定上传且不传值”，只用
disabled；如果后端必须收到旧文件名或标识，应改用隐藏域<input type="hidden" name="filename">配合disabled文件框 - Chrome DevTools 里右键检查元素，确认
disabled是作为 DOM 属性存在（而非仅 class 或 style），再用console.log(new FormData(form))验证字段是否真的消失
最易被忽略的是：禁用后 files 属性清空是不可逆的，哪怕之后启用，之前选的文件也不会回来——如果业务逻辑依赖历史文件信息，得在禁用前手动存到 data- 属性或变量里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
