PrimeFaces高级多文件上传：如何阻止未上传待处理文件时提交表单？

你可以通过监听表单提交事件，结合PrimeFaces文件上传组件的客户端API检查待处理文件，从而阻止表单提交，具体实现如下：

核心思路 #

PrimeFaces高级模式的文件上传组件提供了客户端widgetVar实例，通过它的getFiles()方法能获取所有已添加的文件，筛选出未上传的文件后，在表单提交前完成校验。

代码示例 #

<h:form id="mainForm">
    <!-- 文件上传组件，指定widgetVar用于客户端调用 -->
    <p:fileUpload widgetVar="myFileUpload" 
                  mode="advanced" 
                  multiple="true" 
                  uploadLabel="上传" 
                  cancelLabel="取消" />

    <!-- 表单提交按钮，添加onsubmit校验逻辑 -->
    <p:commandButton value="提交表单" 
                     action="#{yourBean.handleSubmit}"
                     onsubmit="return validatePendingFiles();" />
</h:form>

<script type="text/javascript">
function validatePendingFiles() {
    // 获取文件上传组件的客户端实例
    const uploadComponent = PF('myFileUpload');
    // 筛选出未上传的文件（isUploaded为false表示待处理状态）
    const pendingFiles = uploadComponent.getFiles().filter(file => !file.isUploaded);

    if (pendingFiles.length > 0) {
        // 提示用户先完成文件上传，可替换为PrimeFaces的growl组件优化体验
        alert('请先完成待上传文件的上传操作，再提交表单！');
        // 返回false阻止表单提交
        return false;
    }
    // 无待处理文件，允许表单提交
    return true;
}
</script>

优化提示 #

• 若想使用更友好的页面提示，可将alert替换为PrimeFaces的消息组件：

  PF('growlWidget').show({
      summary: '操作提示',
      detail: '存在未上传的文件，请先完成文件上传',
      severity: 'warn'
  });
  

  需在页面中提前添加对应的组件：<p:growl widgetVar="growlWidget" />
• 确保widgetVar属性值唯一，避免页面中多个组件实例冲突。

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