本文介绍如何为 JavaScript 动态生成的 元素正确绑定 change 事件，实现在表单提交前校验文件大小，避免因超限导致 PHP 后端 POST 失败且用户无感知的问题。
本文介绍如何为 javascript 动态生成的 `` 元素正确绑定 `change` 事件，实现在表单提交前校验文件大小，避免因超限导致 php 后端 post 失败且用户无感知的问题。
在前端动态创建文件输入控件（如通过 document.createElement('input')）时，常见的误区是将事件处理函数以字符串形式赋值给 onchange 属性（例如 input.onchange = 'upload_check()'）。这种写法实际不会触发函数执行——它只是把字符串 'upload_check()' 赋给了 onchange 属性，并未建立有效的事件监听关系。更严重的是，该写法混淆了 HTML 属性（onchange="upload_check()"）与 DOM 元素属性（element.onchange = functionRef）的语义差异。
正确的做法是直接将函数引用赋值给 onchange，或更推荐地使用 addEventListener：
// ✅ 正确：传入函数引用（不带括号）
input.onchange = upload_check;
// ✅ 更优：支持多个监听器，语义清晰，推荐使用
input.addEventListener('change', upload_check);同时，原始 upload_check 函数存在硬编码 ID（"file1"）和潜在运行时错误风险（如用户未选文件时 upl.files[0] 为 undefined）。应改造为基于事件对象获取当前触发元素，提升健壮性与复用性：
function upload_check(event) {
const input = event.target; // 获取当前触发 change 的 input 元素
const maxFileSize = 1000000; // 1MB
if (!input.files || input.files.length === 0) return;
const file = input.files[0];
if (file.size > maxFileSize) {
alert(`文件 "${file.name}" 超出最大限制（${(maxFileSize / 1024).toFixed(1)} KB）！`);
input.value = ''; // 清空选择，防止后续提交无效文件
}
}最后，在 createNewFiled() 中整合事件绑定逻辑（建议使用 addEventListener）：
var createNewFiled = function() {
counter++;
if (counter > 10) {
alert('最多允许添加 10 个附件。');
return;
}
var input = document.createElement("input");
var br = document.createElement("br");
var br2 = document.createElement("br");
input.id = 'file' + counter;
input.classList.add("inputClass");
input.type = 'file';
input.name = 'file' + counter;
// ✅ 绑定事件：使用 addEventListener，传入函数引用
input.addEventListener('change', upload_check);
attachments.appendChild(input);
attachments.appendChild(br);
attachments.appendChild(br2);
};⚠️ 注意事项：
- 不要使用
input.onchange = 'upload_check()'或input.setAttribute('onchange', 'upload_check()')，这属于无效绑定； - 务必检查
input.files.length，防止用户取消选择后files[0]报错； - 若需兼容旧版 IE（input.onchange = upload_check，但现代项目建议统一使用
addEventListener； - 前端校验仅为用户体验优化，不可替代服务端校验，PHP 仍需通过
$_FILES['xxx']['size']和upload_max_filesize配置做双重防护。
通过以上改进，每个动态创建的文件输入框都能独立、可靠地完成上传前大小校验，显著提升表单健壮性与用户交互体验。
