检查是否在 p:fileUpload 中选择了文件答案

【问题标题】：Check whether a file has been chosen in p:fileUpload检查是否在 p:fileUpload 中选择了文件
【发布时间】：2016-01-06 03:02:08
【问题描述】：

我正在使用 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 属性仍然是 null 直到 upload按钮被点击）。我在<p:fileUpload> 组件上尝试了valueChangeListener，但是只有在我单击上传按钮时才会触发该事件（但为时已晚）

有人有什么建议吗？

【问题讨论】：

您使用的是 JSF 2.2 吗？

标签： jsf file-upload primefaces

【解决方案1】：

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

不支持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() 函数启用/禁用它。

【讨论】：

不幸的是，它没有按预期工作，我收到一个错误：Error Parsing XXX.xhtml: Error Traced[line: XXX] 与元素类型关联的属性“a:onchange”的前缀“a” “p:fileUpload”未绑定。顺便使用 primefaces 5.2 和 jsf 2.2.12
所以你没有点击“直通属性”链接来了解它？我会更新答案。
我点击了它，但似乎没有仔细阅读它。再次感谢这个很棒的答案，你似乎对 jsf 了如指掌。尊重
不客气。如果您了解一点 HTTP/HTML/CSS/JS，JSF 会容易得多（毕竟，这就是 JSF 在幕后消费和生产的东西）。