如何用jQuery计算/验证/限制动态添加文件上传字段的总大小？

完全能通过jQuery实现动态添加的文件上传字段的总大小计算、验证和限制，下面是具体的实现方案，刚好能适配你提供的现有代码：

核心逻辑 #

我们通过监听所有文件上传控件的change事件，实时累加已选择文件的总大小，和20MB的阈值对比；同时在表单提交时做最终验证，确保总大小不超限。

具体实现步骤 #

1. 定义阈值变量
   先把20MB转换成字节数（因为文件大小的API返回的是字节），再定义一个变量存储当前总大小：

const MAX_TOTAL_SIZE = 20 * 1024 * 1024; // 20MB 转字节
let totalFileSize = 0;

2. 编写总大小计算函数
   写一个通用函数，遍历所有attachment[]文件控件，累加每个选中文件的大小：

function calculateTotalFileSize() {
    totalFileSize = 0;
    $('input[name="attachment[]"]').each(function() {
        const files = this.files;
        if (files.length > 0) {
            totalFileSize += files[0].size;
        }
    });
    return totalFileSize;
}

3. 整合验证逻辑到现有代码
   把实时监听、移除字段后的更新、提交验证都整合到你现有的jQuery代码里，完整代码如下：

$(document).ready(function() { 
    const MAX_TOTAL_SIZE = 20 * 1024 * 1024;
    let totalFileSize = 0;
    var max_fields = 10; 
    var wrapper = $(".input_fields_wrap"); 
    var add_button = $(".add_field_button"); 
    var x = 1; 

    // 计算所有选中文件的总大小
    function calculateTotalFileSize() {
        totalFileSize = 0;
        $('input[name="attachment[]"]').each(function() {
            const files = this.files;
            if (files.length > 0) {
                totalFileSize += files[0].size;
            }
        });
        return totalFileSize;
    }

    // 验证总大小并给出提示
    function validateTotalSize() {
        const currentTotal = calculateTotalFileSize();
        if (currentTotal > MAX_TOTAL_SIZE) {
            alert(`总文件大小超出限制啦！当前总大小：${(currentTotal / 1024 / 1024).toFixed(2)}MB，最多允许20MB`);
            return false;
        }
        return true;
    }

    // 监听文件选择变化，实时验证
    $(wrapper).on('change', 'input[type="file"]', function() {
        validateTotalSize();
    });

    // 添加新字段的原有逻辑
    $(add_button).click(function(e) { 
        e.preventDefault(); 
        if (x < max_fields) { 
            x++; 
            $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>'); 
        } 
    }); 

    // 移除字段的原有逻辑，移除后更新总大小
    $(wrapper).on("click", ".remove_field", function(e) { 
        e.preventDefault(); 
        $(this).parent('div').remove(); 
        x--;
        calculateTotalFileSize(); // 移除后重新计算总大小
    }); 

    // 表单提交时的最终验证，防止绕过前端检查
    $('form').submit(function(e) {
        if (!validateTotalSize()) {
            e.preventDefault(); // 阻止表单提交
        }
    });
});

关键注意点 #

• 浏览器兼容性：File.size属性支持IE10及以上现代浏览器，如果你需要兼容更老的浏览器，可能要额外处理，但现在大部分场景下没问题。
• 单个文件限制：如果需要同时限制单个文件的大小，可以在change事件里单独检查每个文件的size。
• 后端验证不能丢：正如你提到的，前端验证只是优化用户体验，必须保留PHP后端的大小验证，防止恶意用户绕过前端限制。

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