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

【问题标题】：Is there a bean event for cancel button in PrimeFaces upload component?PrimeFaces上传组件中是否有取消按钮的bean事件？
【发布时间】：2018-03-21 16:00:06
【问题描述】：

我们正在使用 primefaces 在我们的 Web 应用程序中处理文件上传。在页面上发生某些事件（按下按钮）时，上传组件变得可见。我们希望能够在按下 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>

【问题讨论】：

标签： jsf file-upload primefaces listener

【解决方案1】：

使用 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 路径，以便它们适合您的需求。

【讨论】：

使用 Javascript 捕捉取消按钮的点击。如何？ :) 谢谢
感谢更新，做了一些修改 - 效果很好:)
我很高兴能提供帮助。不幸的是，我没有时间寻求更详细的解决方案。

【解决方案2】：

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

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

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

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

【讨论】：