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

Question

我使用<p:fileUpload>的仅限于PDF.但是,组件invalidFileMessage内部显示<p:fileUpload>.我怎样才能显示出来<p:growl>呢？

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

Answer 1

你无法处理这个服务器端.在客户端验证文件类型,而不在服务器端访问任何代码.因此,任何建议手动创建FacesMessage和/或显式添加的建议<p:message(s)>都是无意义且未经测试的.

你应该使用jQuery.它解决了一切.

根据fileupload.js源代码,您最好的选择是监听show消息容器的虚构事件,然后将消息容器移动到表单的末尾.

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

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

然后简单地创建一个show事件监听器,它基本上在文件上传消息出现时运行,然后解析每个消息并使用JS API 的renderMessage()功能<p:growl>.以下示例假设您<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()
        });
    });
}); 

Answer 2

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

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

在 fileupload update="@this,test" 中，您的消息将显示在 p:messages 中。您可以在咆哮中轻松更改，效果相同。

在 primefaces 展示中查看更多示例