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

【问题标题】：Display <p:fileUpload> validation errors inside <p:messages>在 <p:messages> 中显示 <p:fileUpload> 验证错误
【发布时间】：2015-10-26 11:42:49
【问题描述】：

我有一个隐藏的<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> 内显示这些消息？

【问题讨论】：

@Tiny: stackoverflow.com/q/17544141
"是的，指向另一个 ID。这个是必要的，否则它不会工作!": 定义'不会工作'... 含糊其辞。为什么不解决这个问题……你说的是上传对话框？那你有 2 个文件上传吗？
@Kukeltje：OP 对其进行了编辑以解释 Tiny 的 cmets，但这些实际上分散了真正问题的注意力，因此我将其删除以减少噪音。
@BalusC：我看到了编辑，但代码和文本仍然“模糊”。 fileUpload 的消息需要显示，但是fileUpload 是隐藏的，那么它是如何使用的呢？从原始文本中，我知道有 another 文件上传正在/正在使用...并且标签指向跨度内生成的 HTML 输入，这是真正的文件上传组件。所以这永远不会起作用（我认为'for'也可以省略，想知道为什么没有错误））。所以该代码仍然会分散注意力（i.m.o.）。以及文件上传是如何完成的？太模糊了，或者我完全错过了一些东西
:-) 您更改了评论。我确实阅读了链接，但没有看到关系。是的，标签指向实际输入，但我希望它指向组件，并且组件使它指向正确的 html 输入。所以根据我的理解，OP使用了一种“hack”来显示实际的文件上传对话框（原生对话框，而不是另一个上传的PF对话框）......现在我明白了......谈论噪音..认为我创造了一些：-(

标签： jsf file-upload primefaces

【解决方案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 特定的类来隐藏它而不是内联样式）

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

【讨论】：

有没有办法使用 showIcon=false 或不同的标签，如 <h:messages> 或新的标签，如 BootsFaces <b:messages>？
只需根据 HTML DOM 树相应地修改 JS 代码即可。
我只是不明白，对不起。我敢打赌，我首先需要更改消息标签。另外我不确定，如何将这些消息添加到其他组件。我知道，您使用的是 PF，BootsFaces 甚至普通 JSF 中是否有类似的东西？我没有找到有关messageContainer 的任何信息。
messageContainer 确实没有记录。我只是在fileupload.js 中查看了 PF 生成的 JS 源代码。至于PF() 函数，这肯定是有文档的，它引用widgetVar 并返回一个代表客户端组件的JS 对象，提供对HTML 元素属性和函数的JS/jQuery 访问。至于 BootsFaces 和纯 JSF，只需提出一个新问题。目前形式的问题并未涵盖这一点。但归结为我的回答和我之前的评论：只需使用 JS 来操作 HTML DOM 树。
谢谢，我总是害怕问这么多东西。谢谢指出！