Question

我们在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>

Answer 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路径，以便它们符合您的要求。

Answer 2

另一种选择是使用

完全隐藏取消按钮

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

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

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

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

2 个答案: