PrimeFaces上传组件中是否有取消按钮的bean事件？

Posted 2021-03-30

我们在Web应用程序中使用primefaces进行文件上载处理。在页面上的某些事件（按下按钮）上，上传组件变得可见。我们希望能够在按下CANCEL按钮时捕获事件，以便使用它来隐藏上传组件。有什么建议吗？ javascript或CSS不会做这项工作，因为我们还需要为此做一些服务器逻辑。

码：

                <h:form id="uploadFileForm" enctype="multipart/form-data" rendered="#{filesMenu.enableFileUpload}">
                    <p:fileUpload style="font-size:12px;"
                        fileUploadListener="#{filesMenu.handleFileUpload}"
                        mode="advanced" dragDropSupport="false"
                        update="msgUpload , :formFilesListId , :formFilesListId:dataTableSimpleFilesId, :createNewFileFromSelectionForm"
                        sizeLimit="100000" fileLimit="1" allowTypes="/(.|/)(cfg)$/" />
                    <p:growl id="msgUpload" showDetail="true" />
                </h:form>

答案

使用Javascript / JQuery捕获取消按钮单击。一方面，您可以在jsf页面上调用隐藏按钮来触发服务器逻辑。另一方面，您可以从Javascript触发以下组件：

<p:remoteCommand name="functionName" action="#{yourBean.yourMethod}">

抓住取消按钮：

$(document).ready(function() {
   $(".ui-fileUpload").on("click",".cancel",function() {

      //Approach remoteCommand 
      functionName();

      //Approach hidden button
      $(".jQueryTohiddenButtonClass").click();
}

可能您必须自定义jQuery路径，以便它们适合您的需求。

另一答案

另一种选择是完全隐藏取消按钮

.ui-fileupload-cancel {
     display: none;
}

并创建自己的按钮，而不是调用action/actionListener并隐藏对话框。

我走得更远，隐藏了所有3个按钮并创建了我自己的保存按钮，在oncomplete中调用了PF('fileupload_widgetvar').upload();。然后你需要有一些javascript来让页面等到上传完成，因为ajax是异步的，所以你不能马上重定向/隐藏对话框。如果您需要该代码，请告诉我。