多文件上传时文件扩展名验证失效，请求技术解决方案

原代码的问题在于：多文件上传时，$(this).val()仅返回第一个文件的路径，导致后续文件的扩展名无法被检测到。要解决这个问题，需要遍历所有上传的文件对象，逐个验证扩展名。

修复后的完整代码 #

$("input[type=file]").on('change', function(){
    // 定义允许的文件扩展名
    var validFileExtensions = ['jpeg', 'jpg', 'png'];
    // 标记是否存在无效文件
    var hasInvalidFile = false;
    
    // 遍历所有上传的文件
    Array.from(this.files).forEach(function(file) {
        // 提取当前文件的扩展名并转小写
        var extension = file.name.split('.').pop().toLowerCase();
        // 检查扩展名是否在允许列表中
        if ($.inArray(extension, validFileExtensions) === -1) {
            hasInvalidFile = true;
            return; // 发现无效文件，终止遍历
        }
    });
    
    // 根据验证结果更新提示和按钮状态
    if (hasInvalidFile) {
        $('#filetype').text("File type is not valid").show();
        $('#btnSubmit').prop('disabled', true);
    } else {
        // 所有文件有效时，隐藏提示并启用按钮
        $('#filetype').hide();
        $('#btnSubmit').prop('disabled', false);
    }
});

关键修改点说明 #

• 使用this.files获取所有上传的文件对象（FileList），通过Array.from()转为数组后遍历
• 逐个检查每个文件的扩展名，只要发现一个无效文件就标记状态并终止遍历
• 新增了有效文件场景的处理：所有文件合规时隐藏提示、启用提交按钮（原代码未处理此逻辑，会导致单文件验证通过后按钮仍保持禁用）
• 保留了原有的提示和按钮操作逻辑，确保行为一致性

内容的提问来源于stack exchange，提问作者Malik Zubair Mukhtar