本文讲解如何为动态生成的 HTML 文件输入元素（）正确绑定 change 事件，实现在表单提交前校验文件大小，避免因超限导致 PHP POST 失败且用户无感知的问题。
本文讲解如何为动态生成的 html 文件输入元素（``）正确绑定 `change` 事件，实现在表单提交前校验文件大小，避免因超限导致 php post 失败且用户无感知的问题。
在使用 JavaScript 动态创建文件输入控件时，常见的误区是将事件处理函数以字符串形式赋值给 onchange 属性（如 input.onchange = 'upload_check()'）。这不仅无效——浏览器会将其视为普通字符串而非可执行函数——而且违背了 DOM 事件绑定的基本原理：onchange 是一个属性，应直接赋值函数引用，而非调用表达式或字符串。
✅ 正确做法是传递函数引用（不带括号）：
input.onchange = upload_check; // 注意：没有 ()，也不加引号
更推荐的方式是使用 addEventListener，它支持为同一事件注册多个处理器，语义清晰且便于维护：
input.addEventListener('change', upload_check);将该行插入 createNewFiled() 函数中，在 input.name = 'file'+counter; 之后、attachments.appendChild(input); 之前即可：
立即学习“Java免费学习笔记（深入）”；
var createNewFiled = function() {
counter++;
if (counter <= 10) {
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;
// ✅ 正确绑定 change 事件（推荐方式）
input.addEventListener('change', upload_check);
attachments.appendChild(input);
attachments.appendChild(br);
attachments.appendChild(br2);
} else {
alert('Ten attachments is max.');
}
};同时，需更新 upload_check 函数，使其能适配任意动态生成的文件输入框（而不仅限于 file1），推荐通过事件对象获取当前触发元素：
function upload_check(event) {
const fileInput = event.target;
const maxFileSize = 1000000; // 1MB
if (fileInput.files && fileInput.files[0]) {
if (fileInput.files[0].size > maxFileSize) {
alert(`File "${fileInput.files[0].name}" is too large (max: ${Math.round(maxFileSize / 1024)} KB).`);
fileInput.value = ''; // 清空选中，重置输入框状态
}
}
}⚠️ 注意事项：
-
fileInput.files[0]可能为undefined（如用户取消选择），务必先做存在性判断； -
input.value = ''是清空文件输入框的标准方式，不可用remove()或innerHTML = ''替代； - 若需兼容旧版 IE（ActiveXObject，但现代项目通常无需支持；
- 建议配合后端校验（如 PHP 的
$_FILES['xxx']['error'] === UPLOAD_ERR_INI_SIZE），实现前后端双重保障。
通过以上改造，每个动态创建的文件输入框都能独立响应文件选择，并在用户选中过大文件时即时提示，显著提升表单健壮性与用户体验。
