Question

我正在使用PrimeFaces的简单fileUpload和自定义提交按钮，如下所示：

<h:form enctype="multipart/form-data">

    <p:fileUpload value="#{fileController.file}"
                  mode="simple"
                  skinSimple="true"
                  label="choose file"/>

    <p:commandButton value="upload"
                     ajax="false"
                     label="upload"
                     icon="fa fa-upload"
                     actionListener="#{fileController.upload}"/>
</h:form>

在支持bean中，file是UploadedFile类型的属性。

现在我想要在没有选择文件的情况下禁用upload按钮，但是我无法获取用户是否选择了文件的信息file属性仍为{{1} }直到单击null按钮）。我在upload组件上尝试了valueChangeListener，但只有在点击上传按钮时才触发该事件（但是为时已晚）

有人有建议吗？

Answer 1

您最终需要对change的HTML DOM <input type="file">事件进行挂钩。如果没有ajax（通过<p:ajax>），<p:fileUpload mode="simple">会因{2}原因而变得棘手：

它不支持onchange属性。 PF人员可能值enhancement request。幸运的是，从JSF 2.2开始，您可以指定passthrough attributes。
skinSimple="true"会生成<span><span><input /></span></span>，而passthrough属性会在所有这些元素上呈现onchange。如果this是<input>元素，则需要额外检查。

总而言之，这是如何做到的：

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:form enctype="multipart/form-data">
    <p:fileUpload label="choose file" mode="simple" skinSimple="true"
        value="#{bean.file}"
        a:onchange="if (tagName == 'INPUT') { if (!!value) PF('button').enable(); else PF('button').disable(); }" />

    <p:commandButton widgetVar="button" value="upload" 
        action="#{bean.upload}" ajax="false"
        disabled="#{facesContext.renderResponse or not facesContext.postback}" />
</h:form>

按钮的disabled属性中的条件确保仅在呈现响应阶段和初始GET请求期间禁用它。否则，JSF将拒绝按commandButton/commandLink/ajax action/listener method not invoked or input value not updated的第5点对行动事件进行排队。

该按钮与文档绑定为widgetVar，以便JS可以通过其enable()和disable()函数启用/禁用它。

检查是否在p：fileUpload中选择了一个文件

1 个答案: