Primefaces 6：simple模式fileUpload下启用Upload按钮

当然可行！问题的核心在于PrimeFaces 6的simple模式p:fileUpload本质是对原生<input type="file">的美化包装，skinSimple="true"只是给它套了样式，底层还是原生DOM元素。所以你需要监听原生的change事件来触发上传按钮的状态切换，而不是依赖PrimeFaces的AJAX组件API。

下面是具体实现步骤：

1. 给文件上传组件添加原生事件监听 #

修改你的p:fileUpload标签，增加onchange属性绑定一个JavaScript函数，用来检测文件选择状态：

<p:fileUpload id="myId" 
              styleClass="MY-STYLE" 
              value="#{bean.objUploadedFile}" 
              mode="simple" 
              skinSimple="true" 
              multiple="false" 
              update="@form" 
              label="Choose" 
              onchange="toggleUploadButton(this)" />

2. 编写状态切换的JavaScript函数 #

这个函数会根据用户是否选择了文件，切换上传按钮的禁用状态：

function toggleUploadButton(fileInput) {
    // 注意：如果按钮在命名容器（比如<h:form id="myForm">）内，客户端ID会是"myForm:btnId"
    var uploadButton = document.getElementById('btnId');
    
    // 当有文件选中时启用按钮，否则保持/恢复禁用状态
    uploadButton.disabled = (fileInput.files.length === 0);
}

关键注意事项 #

• 客户端ID问题：如果你的p:commandButton在<h:form>或者其他命名容器（如<p:tabView>）内，PrimeFaces会生成带容器前缀的客户端ID，比如myForm:btnId，这时候JS里的getElementById要使用完整的客户端ID。
• 取消选择的处理：如果用户点击Choose按钮后又取消选择文件，fileInput.files.length会回到0，这时候函数会自动重新禁用按钮，覆盖了边界场景。
• 初始化状态：确保后台myBean.btnDisabled初始为true，对应页面加载时按钮的禁用状态，和JS逻辑保持一致。

之前你的JavaScript无效，大概率是因为尝试用PrimeFaces的组件API（比如PF('widgetVar')）操作simple模式的组件，但simple模式没有对应的PrimeFaces widget，必须直接操作原生DOM元素。

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