如何在操作完成之前隐藏按钮？ Primefaces

Question

我目前有一个文件上传系统，目前我有一个按钮将用户带到下一页，但即使用户没有上传任何内容，这也是可见的，如果用户在上传任何内容之前按下这个，则存在危险它会抛出错误而且看起来很糟糕，所以我要做的是隐藏此按钮，直到成功实现文件上传，任何想法如何？

<p:fileUpload widgetVar="upload" fileUploadListener="#{fileUploadController.handleFileUpload}"
                                  mode="advanced" 
                                  multiple="false" 
                                  update="messages"
                                  label="Select File"
                                  sizeLimit="100000000" 
                                  allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf|html)$/"
                                  auto="true"/> 
                    <!-- selected auto="true" this has been selected to prevent user error as was discovered 
                    when testing, some users pressed the upload button and wondered why nothing worked instead of
                    select file, now this stops this -->


                    <p:growl id="messages" showDetail="true"/>

                    Please press the button below once you have uploaded the file, to continue


                    <p:commandButton action="#{navigationBean.naviagtion}"   value="Next"  ajax="False"/> 

操作的命令按钮接下来是我希望禁用直到文件上传完成的按钮

编辑：

<p:commandButton action="#{navigationBean.naviagtion}"   value="Next"  ajax="False" disabled="#{!fileUploadController.UploadComplete}"/> 

是我的命令按钮，它指向fileUploadContoller，这是文件上传发生的地方等，

问题是，当我运行应用程序时，我总是在页面加载时获得一个实时按钮

我在我的fileUploadController上添加了一个布尔值：

    public void handleFileUpload(FileUploadEvent event) {
        //System.out.println("DesintationPDF : " + destinationPDF);
        System.out.println("called handle file");
        System.out.println("Destination is : " + configProp.getProperty("destination"));

        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded."); //Displays to user on the webpage
        FacesContext.getCurrentInstance().addMessage(null, msg);


        try {
            copyFile(event.getFile().getFileName(), event.getFile().getInputstream());
        } catch (IOException e) {
//handle the exception
            e.printStackTrace();
        }

    }

    public boolean isUploadComplete() {
        return uploadComplete;
    }

    public void setUploadComplete(boolean uploadComplete) {
        this.uploadComplete = uploadComplete;
    }

但仍然得到错误

编辑2：

     <p:commandButton action="#{navigationBean.naviagtion}"   value="Next" disabled="#{!fileUploadController.uploadComplete}"/> 

控制台

INFO: Upload complete value before copy file false
INFO: upload complete value is : true

所以它将值更改为true

但是没有改变生活按钮

Answer 1

要在上传完成之前禁用按钮，只需将disabled属性绑定到bean中的属性即可。 在我看来，禁用似乎比突然渲染它更直观。 用户也会知道后台正在发生一些事情。

 <p:commandButton action="#{navigationBean.naviagtion}" value="Next" disabled="#{bean.disable}" ajax="False"/> 

由于您使用PrimeFaces，此解决方案是最简单的。 只需用bean的名称替换bean即可。

编辑：

public class YourNavigationBean {

    private boolean uploadComplete; // <--- that's the property

    // ... your bean content, like constructors and stuff..
    // ...

    //a setter and a getter is needed, to here they are
    public boolean isUploadComplete() {
       return uploadComplete;
    }
    public void setUploadComplete(boolean uploadComplete) {
       this.uploadComplete = uploadComplete;
    }
}

Answer 2

使下一个按钮不可见。 在成功上传文件后，在开头维护一个flag = false，使标志为true。 或者在文件上传结束时，将下一个按钮显示为true;

Answer 3

ON上传完成事件集display = block。

HTML

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" id="submitbutton" value="submit" style="display:none" />
</form>
<div id="result"></div>

使用Javascript：

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                   document.getElementById("submitbutton").style.display='block'; 
                } 
            }
            );
    });

现场演示： http ： //jsfiddle.net/E42XA/205/