HTML5中input[type="file"]无默认上传行为，所谓“默认上传”实为开发者在change事件中手动调用submit()、fetch()等所致；需在真正发起请求的事件（如submit、fetch调用前）阻止，而非click或change中盲目调用preventDefault()。
阻止 input[type="file"] 的默认上传触发
HTML5 本身没有“上传行为”的内置逻辑——input[type="file"] 点击后只打开文件选择对话框，**不会自动提交或上传**。所谓“默认上传”，实际是开发者在 change 事件里手动调用了 form.submit()、fetch() 或第三方库（如 jQuery File Upload）导致的。要“取消”，本质是拦截你自己的上传代码。
event.preventDefault() 在哪里用才有效
它不能加在 click 上（因为点击不触发上传），必须作用于真正发起请求的事件：比如表单提交、AJAX 发送、或自定义上传函数的入口。常见错误是给 input 绑定 click 并调用 preventDefault()，这毫无意义。
- 如果用了
包裹且监听了submit：在submit回调里调用event.preventDefault() - 如果用了
change+fetch()：不在change里阻止，而是在真正调用fetch()前加条件判断，或直接不执行该调用 - 如果用了
XMLHttpRequest.upload.onprogress等：阻止点在发起请求前，不是在上传中段
禁用上传功能的三种可靠方式
根据你的控制粒度选择：
/* 方式1：完全禁用 input（用户无法选文件） */
document.querySelector('input[type="file"]').disabled = true;
/ 方式2：保留选择但阻断后续逻辑（推荐） /
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function (e) {
e.preventDefault(); // 这行其实无效，change 事件本身不可取消
// ✅ 正确做法：清空值并返回，避免后续处理
this.value = '';
return;
});
/ 方式3：条件性跳过上传（例如校验失败时） /
fileInput.addEventListener('change', function () {
if (!isValidFile(this.files[0])) {
alert('不支持该文件类型');
this.value = ''; // 重置 input，否则下次 change 不触发
return; // ❌ 不执行 upload() 函数
}
upload(this.files[0]); // 只有通过校验才调用
});
容易被忽略的关键点
input[type="file"] 的 value 是只读的，但赋值空字符串 this.value = '' 是合法且必要的——否则用户选过一次后，再选相同文件，change 事件不会再次触发，导致逻辑失效。另外，现代浏览器中，FormData.append() 或 fetch() 本身没有“默认上传开关”，一切取决于你是否执行它。所谓“禁用”，就是让那行上传代码不运行。
立即学习“前端免费学习笔记（深入）”；
