JavaScript无原生“文件大小超出限制”事件，需监听input/change事件获取files[0].size与预设值比对，支持单/多文件校验，并应在表单submit时二次验证，但仅作体验优化，不可替代服务端限制。
JavaScript 本身没有专门的“文件大小超出限制”事件，但可以通过监听 input 或 change 事件，在用户选择文件后立即读取 files[0].size 并与预设限制比对，手动触发逻辑处理（如提示、清空输入、阻止提交等）。
监听 input/change 事件并校验文件大小
这是最常用且可靠的方式。表单中文件输入控件（<input type="file">）在用户选择文件后会触发 input 或 change 事件，此时可访问 files 对象：
-
input事件更及时（部分浏览器在文件选择弹窗关闭即触发），推荐使用 -
files是FileList，即使只允许单文件，也要通过files[0]获取 - 单位是字节（bytes），注意换算（例如 2MB = 2 * 1024 * 1024 = 2097152）
示例代码：
<input type="file" id="fileInput" accept="image/*">
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
const fileInput = document.getElementById('fileInput');
const maxSize = 2 * 1024 * 1024; // 2MB
<p>fileInput.addEventListener('input', function () {
const file = this.files[0];
if (file && file.size > maxSize) {
alert(<code>文件不能超过 ${maxSize / 1024 / 1024} MB</code>);
this.value = ''; // 清空输入框（重置选择）
}
});
结合表单提交前二次校验
仅靠前端校验不够安全，但为提升体验，可在表单提交时再次检查，防止绕过 input 监听（如通过脚本设置 files）：
- 监听表单的
submit事件 - 查找所有
type="file"的字段，逐个检查files[0]?.size - 若超限，调用
event.preventDefault()阻止提交，并给出反馈
服务端限制无法被 JS 监听，需配合使用
HTML 的 accept 属性和 maxlength 对文件无效；form.enctype 和服务端配置（如 Nginx 的 client_max_body_size、Node.js 中间件的文件大小限制）才是真正的防线。JS 校验只是用户体验优化，不能替代后端验证。
注意多文件上传场景
如果 input 带有 multiple 属性，需遍历 files 全部项：
for (let i = 0; i < this.files.length; i++) {
if (this.files[i].size > maxSize) {
console.warn(`${this.files[i].name} 超出大小限制`);
// 可选择跳过该文件，或整体拒绝
}
}
