JS动态创建file input后无法绑定onchange实现前置文件大小校验

问题1：事件绑定方式错误 #

你用 input.onchange = 'upload_check()' 的方式绑定事件是错误的——这种字符串赋值的写法只在HTML标签内写 onchange="upload_check()" 时有效，通过JS动态绑定DOM0级事件时，应该直接赋值函数引用，而非字符串形式的函数调用。

问题2：校验函数只能固定校验第一个输入框 #

你的 upload_check() 函数里硬编码了 document.getElementById("file1")，但动态创建的输入框id是 file1 到 file10，这会导致只有第一个输入框的文件能被校验，后续创建的输入框选择文件时，函数还是会去拿第一个输入框的文件，完全起不到对应校验的作用。

修复方案 #

步骤1：修正事件绑定方式 #

在 createNewFiled 函数中，把 input.onchange = 'upload_check()'; 改成以下两种方式之一：

• 方式一（DOM0级事件）：直接赋值函数

input.onchange = upload_check;

• 方式二（DOM2级事件，更推荐，支持绑定多个事件）：

input.addEventListener('change', upload_check);

步骤2：修改校验函数，适配所有动态创建的输入框 #

修改 upload_check 函数，通过 event.target 获取当前触发事件的输入框元素，而非固定获取id为 file1 的元素：

function upload_check(event) {
    // 获取当前触发事件的文件输入框
    var upl = event.target;
    // 限制为1000000字节（约0.95MB）
    var max = 1000000;

    // 先判断是否选择了文件，避免未选文件时报错
    if (upl.files.length > 0 && upl.files[0].size > max) {
        alert("文件过大！");
        upl.value = ""; // 清空文件选择
    }
};

完整修正后的createNewFiled函数示例 #

var counter = 0;
var incrementBtn = document.getElementById('incrementBtn');
var attachments = document.getElementById('attachments');

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;
        
        // 修正事件绑定
        input.addEventListener('change', upload_check);
        
        attachments.appendChild(input);
        attachments.appendChild(br);
        attachments.appendChild(br2);
    }
    else {
        alert('最多只能添加10个附件');
    }
};

内容的提问来源于stack exchange，提问作者SheldonCopper