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

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

ON 上传完成事件 set 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/

Answer 3

使下一个按钮不可见。一开始保持一个flag = false，成功上传文件后将flag设为true。或在文件上传结束时使下一步按钮可见；