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

Question

I'm using PrimeFaces' simple fileUpload and a custom submit button, something like this: 我正在使用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>

In the backing bean, file is a property of type UploadedFile . 在backing bean中， file是UploadedFile类型的属性。

Now I want to disable the upload button if no file is selected yet, but I fail to get the Information whether the user has selected a file or not the file property remains null until the upload button is clicked). 现在我想要在没有选择文件的情况下禁用upload按钮，但是我无法获得信息，无论用户是否选择了文件， file属性在单击upload按钮之前都保持为null 。 I tried the valueChangeListener on the <p:fileUpload> component, but the event is only fired when I click the upload button (but then it's too late) 我在<p:fileUpload>组件上尝试了valueChangeListener ，但只有当我点击上传按钮时才触发该事件（但是为时已晚）

Anyone has a suggestion? 有人有建议吗？

Answer 1

You ultimately need a hook on the HTML DOM change event of <input type="file"> . 您最终需要一个关于<input type="file">的HTML DOM change事件的挂钩。 Without ajax (via <p:ajax> ) that gets tricky with <p:fileUpload mode="simple"> for 2 reasons: 没有ajax（通过<p:ajax> ），由于两个原因，使用<p:fileUpload mode="simple">会变得棘手：

It doesn't support onchange attribute. 它不支持onchange属性。 It might be worth an enhancement request to PF guys. PF人员可能值得一个增强请求。 Fortunately, since JSF 2.2 you can specify passthrough attributes . 幸运的是，从JSF 2.2开始，您可以指定直通属性。
skinSimple="true" generates a <span><span><input /></span></span> and the passthrough attribute would render onchange on all those elements. skinSimple="true"生成<span><span><input /></span></span> ，passthrough属性将在所有这些元素上呈现onchange 。 You need an additional check if this is the <input> element. 如果this是<input>元素，则需要额外检查。

All in all, here's how it could be done: 总而言之，这是如何做到的：

<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>

The condition in the disabled attribute of the button makes sure that it's only disabled during render response phase and an initial GET request. 按钮的disabled属性中的条件确保仅在呈现响应阶段和初始GET请求期间禁用它。 Otherwise JSF would refuse to queue the action event as per point 5 of commandButton/commandLink/ajax action/listener method not invoked or input value not updated . 否则，JSF将拒绝按照commandButton / commandLink / ajax动作/侦听器方法的第 5点对动作事件进行排队，或者未调用输入值。

The button is tied to the document as widgetVar so that JS could enable/disable it via its enable() and disable() functions. 该按钮作为widgetVar绑定到文档，以便JS可以通过其enable()和disable()函数启用/禁用它。

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

问题描述

1 个解决方案

解决方案1
8 已采纳 2015-10-08 15:55:54

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

问题描述

1 个解决方案

解决方案1 8 已采纳 2015-10-08 15:55:54

解决方案1
8 已采纳 2015-10-08 15:55:54