在 <p:messages> 中显示 <p:fileUpload> 个验证错误

Question

我有一个隐藏的 <p:fileUpload> 可以通过 <h:outputLabel> 打开。

<p:messages id="message" autoUpdate="true" />

<h:form id="form">

    <p:fileUpload id="file-input" auto="true"
        allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="10"
        invalidSizeMessage="wrong size" fileUploadListener="#{bean.image}"
        update="@form message" style="display: none;"
        invalidFileMessage="wrong file" />

    <h:outputLabel for="file-input_input">
        <h:graphicImage name="images/dummy.jpg" />
     </h:outputLabel>

    <h:outputText value="#{bean.file.fileName}" />
    <br />
    <h:outputText value="#{bean.file.size}" />
</h:form>

不幸的是，验证失败后没有显示任何消息（例如无效大小或无效文件）。这些消息显示在 <p:fileUpload> 内容框中而不是 <p:messages> 中。

如何在 <p:messages> 中而不是在 <p:fileUpload> 中显示这些消息？

Answer 1

验证完全在客户端执行，无需访问服务器。所以你不能从服务器端控制它。

<p:fileUpload> 的消息容器可通过小部件变量的 messageContainer 属性获得。单击标签时，简单地让 jQuery 将其移动到 <p:messages> 中：

<p:messages id="messages" ... />

<h:form>
    <p:fileUpload id="file-input" widgetVar="file-input" ... 
        styleClass="ui-helper-hidden" />
    ...
    <h:outputLabel for="file-input_input" ...
        onclick="PF('file-input').messageContainer.appendTo($('#messages'));" />
</h:form>

（我只是重命名了 <p:message id> 更明智，并使用了 PrimeFaces 特定的 class 来隐藏它而不是内联样式）

<p:fileUpload> 的 onstart 和 oncomplete 属性不可用，因为它们仅在客户端验证通过且文件上传请求实际发送时执行。

在 <p:messages> 中显示 <p:fileUpload> 个验证错误

Display <p:fileUpload> validation errors inside <p:messages>

jsf

file-upload

primefaces