如何在 p:growl 中显示 p:fileUpload invalidFileMessage答案

【问题标题】：How to display p:fileUpload invalidFileMessage in p:growl如何在 p:growl 中显示 p:fileUpload invalidFileMessage
【发布时间】：2013-05-22 06:17:59
【问题描述】：

我正在使用<p:fileUpload>，它仅限于 PDF。但是，invalidFileMessage 显示在 <p:fileUpload> 组件内。我怎样才能在<p:growl> 中显示它？

<p:fileUpload allowTypes="/(\.|\/)(pdf)$/"
              invalidFileMessage="File is Invalid. Only PDF files are allowed" />

【问题讨论】：

你找到解决办法了吗？

标签： jsf file-upload primefaces message growl

【解决方案1】：

您无法处理此服务器端。文件类型在客户端验证，而不会在服务器端命中任何代码。因此，任何建议手动创建 FacesMessage 和/或显式添加 <p:message(s)> 的建议都是未经深思熟虑且未经测试的。

You should use jQuery. It solves everything.

根据fileupload.js 源代码，最好的办法是侦听消息容器的虚构show 事件，然后将消息容器移动到表单末尾。

首先扩展$.show() 以实际触发show 事件。

(function($) {
    var originalShowFunction = $.fn.show;
    $.fn.show = function() {
        this.trigger("show");
        return originalShowFunction.apply(this, arguments);
    };
})(jQuery);

然后只需在show 事件上创建一个侦听器，该事件基本上在文件上传消息出现时运行，然后解析每条消息并使用<p:growl> JS API 的renderMessage() 函数。下面的示例假设您在同一页面的某处有一个<p:growl widgetVar="growl">。

$(document).on("show", ".ui-fileupload-content>.ui-messages", function() {
    $(this).children().hide().find("li").each(function(index, message) {
        var $message = $(message);
        PF("growl").renderMessage({
            summary: $(".ui-messages-error-summary", $message).text(),
            detail: $(".ui-messages-error-detail", $message).text()
        });
    });
});

【讨论】：

【解决方案2】：

在您的页面中添加一个消息标签，例如：

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

并且在 fileupload update="@this,test" 中，您的消息将显示在 p:messages 中。你可以很容易地改变咆哮的工作方式。

查看 primefaces 展示以获取更多示例

【讨论】：

你好 Tankhenk..，不工作。
嗯，我不认为这是可能的。

【解决方案3】：

在 Primefaces 展示中查找了一个示例并找到了这个。实际页面：

<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
              mode="advanced"   
              update="messages"
              allowTypes="/(\.|\/)(pdf)$/"/>  

<p:growl id="messages" showDetail="true"/>

还有文件上传控制器类：

public void handleFileUpload(FileUploadEvent event) {  
    FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");  
    FacesContext.getCurrentInstance().addMessage(null, msg);  
}

关于如何在 Primefaces 中显示消息可能需要牢记

【讨论】：

您好 ClydeFrog..，您是否尝试过您评论中的示例？由于您在 p:fileUpload 使用 allowTypes="/(\.|\/)(pdf)$/" 进行过滤，因此当您上传 PDF 以外的文件时，不会调用 handleFileUpload()。所以在 GROWL 中没有消息。