PrimeFaces 5.1中p:fileUpload超出fileLimit时如何取消整个批量文件上传

针对你遇到的fileLimit仅拦截单个超量文件、不终止整个批量上传的问题，我们可以通过重写PrimeFaces文件上传组件的客户端方法，从根源上阻止超量文件被添加到上传队列，并在超出限制时给出提示，彻底终止后续上传流程。

具体实现步骤 #

1. 保留原有JSF组件配置

你的p:fileUpload组件配置可以基本保持不变，我们只需要通过客户端脚本增强其校验逻辑：

<p:fileUpload id="file-upload-input1" 
              label="#{msg['fileUpload.attachment']}" 
              auto="true" 
              fileUploadListener="#{fileUploadController.uploadFile}" 
              widgetVar="fileUploadWidget" 
              mode="advanced" 
              fileLimit="30" 
              oncomplete="onCompleteAllFiles(this);" 
              onerror="alert('Error. Try again')" 
              invalidFileMessage="#{msg['fileUpload.file.invalid.type']}" 
              invalidSizeMessage="#{msg['fileUpload.file.invalid.size']}" 
              sizeLimit="3221223823" 
              multiple="true" 
              allowTypes="/(\.|\/)(xml|pdf)$/" 
              update="file-upload-info"/>

2. 添加客户端拦截脚本

在页面中添加以下JavaScript代码，重写文件上传组件的addFiles方法（处理批量文件选择），并添加上传前二次校验：

<h:outputScript>
$(document).ready(function() {
    // 获取文件上传组件的客户端实例
    var uploadWidget = PF('fileUploadWidget');
    // 保存原始的addFiles方法，避免覆盖后丢失原有功能
    var originalAddFiles = uploadWidget.addFiles;

    // 重写addFiles方法，在文件添加到队列前校验总数
    uploadWidget.addFiles = function(files) {
        var maxAllowed = this.cfg.fileLimit;
        // 计算当前队列文件数 + 新选择文件数是否超出限制
        if (this.files.length + files.length > maxAllowed) {
            // 提示用户（这里可以替换为PrimeFaces的growl组件提升体验）
            alert('#{msg['fileUpload.file.limit.exceeded']}');
            // 阻止文件添加到队列，直接终止后续流程
            return false;
        }
        // 校验通过，调用原始方法添加文件
        originalAddFiles.call(this, files);
    };

    // 上传前二次校验，确保万无一失
    uploadWidget.cfg.beforeUpload = function() {
        if (this.files.length > this.cfg.fileLimit) {
            alert('#{msg['fileUpload.file.limit.exceeded']}');
            return false; // 返回false阻止整个上传操作
        }
        // 执行你原来的onstart逻辑
        PF('loadingDialog').show();
        return true;
    };
});
</h:outputScript>

关键逻辑说明 #

• 重写addFiles方法：这是拦截批量文件选择的核心，用户选择文件后会立刻触发这个方法，我们在这里校验总文件数，超出限制就阻止文件进入上传队列，从根源上避免部分上传。
• beforeUpload二次校验：作为兜底逻辑，防止因特殊情况（比如手动修改队列）导致文件数超量，此时会在上传开始前终止整个流程。
• 复用组件配置：通过this.cfg.fileLimit直接获取你在组件上设置的fileLimit值，不用硬编码，保持配置一致性。

优化提示 #

如果你想替换生硬的alert，可以使用PrimeFaces的p:growl组件：

1. 在页面添加growl组件：

<p:growl widgetVar="growlWidget" showDetail="true" life="5000"/>

2. 将脚本中的alert替换为：

PF('growlWidget').show({
    severity: 'error',
    summary: '#{msg['error.title']}',
    detail: '#{msg['fileUpload.file.limit.exceeded']}'
});

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