如何在操作完成之前隱藏按鈕？ 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/