检查是否在p:fileUpload中选择了文件 [英] Check whether a file has been chosen in p:fileUpload
问题描述
我正在使用PrimeFaces的简单fileUpload和自定义提交按钮，如下所示:
I'm using PrimeFaces' simple fileUpload and a custom submit button, something like this:
<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的属性.
In the backing bean, file is a property of type UploadedFile.
现在，如果尚未选择任何文件，我想禁用upload按钮，但是无论用户是否选择了文件，我都无法获取信息，直到upload之前，file属性是否仍然是null按钮).我在<p:fileUpload>组件上尝试了valueChangeListener，但是仅当我单击上载按钮时才触发该事件(但为时已晚)
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). 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)
有人有建议吗?
推荐答案
您最终需要钩住<input type="file">的HTML DOM change事件.如果没有ajax(通过<p:ajax>)，则使用<p:fileUpload mode="simple">会比较棘手，原因有两个:
You ultimately need a hook on the HTML DOM change event of <input type="file">. Without ajax (via <p:ajax>) that gets tricky with <p:fileUpload mode="simple"> for 2 reasons:
- 它不支持
onchange属性.对PF家伙来说，可能值得增强请求.幸运的是，自JSF 2.2起，您可以指定直通属性. -
skinSimple="true"生成一个<span><span><input /></span></span>，并且passthrough属性将在所有这些元素上呈现onchange.您需要另外检查this是否为<input>元素.
- It doesn't support
onchangeattribute. It might be worth an enhancement request to PF guys. Fortunately, since JSF 2.2 you can specify passthrough attributes. skinSimple="true"generates a<span><span><input /></span></span>and the passthrough attribute would renderonchangeon all those elements. You need an additional check ifthisis the<input>element.
总而言之，这是可以完成的方法:
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>
按钮的disabled属性中的条件确保仅在渲染响应阶段和初始GET请求期间将其禁用.否则，JSF将拒绝按照
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. 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.
该按钮以widgetVar的形式绑定到文档，以便JS可以通过其enable()和disable()函数启用/禁用它.
The button is tied to the document as widgetVar so that JS could enable/disable it via its enable() and disable() functions.
这篇关于检查是否在p:fileUpload中选择了文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
