8

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

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

3 回答 3

9

您无法处理此服务器端。文件类型在客户端验证，而不会在服务器端命中任何代码。因此，任何建议手动创建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()
        });
    });
});
于 2015-12-28T14:14:29.843 回答
-1

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

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

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

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

于 2013-05-22T07:28:00.910 回答
-2

在 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 中显示消息可能要记住一些事情

于 2013-05-22T07:36:35.017 回答