3

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

<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

但没有将按钮更改为活动

4

3 回答 3

4

要在上传完成之前禁用按钮，只需将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;
    }
}
于 2013-02-17T16:18:01.803 回答
1

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

于 2013-02-17T16:09:07.480 回答
0

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/

于 2013-02-17T16:16:51.763 回答