如何在简单模式和 ajax="true" 中使用 <p:fileUpload>？

Posted 2023-02-23

【中文标题】如何在简单模式和 ajax="true" 中使用 <p:fileUpload>？

【英文标题】：How can I use <p:fileUpload> with mode simple and ajax="true"?

【发布时间】：2013-11-28 14:12:35

【问题描述】：

我想使用 PrimeFaces 和 ManagedBean 上传文件。我想将p:fileUpload 与 mode="simple" 一起使用。

XHTML 代码：

    <p:fileUpload id="fileId" mode="simple" value="#itemBean.upFile"
        fileLimit="1" />
    <p:commandButton ajax="true" value="Upload File" update="messagess"
                     id="save-btn"
                     actionListener="#itemBean.fileUpload(itemBean.upFile,itemBean.hiddenFileName)"
                     process="@this" oncomplete="showImage()" />

ManagedBean：

public void fileUpload(UploadedFile uploadFile, String hiddenKey)   
    String keyFileName = hiddenKey;

    boolean validFile = true;
    String expression = "([^\\s]+(\\.(?i)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG|bmp))$)";
    if((uploadFile == null) ) 
        validFile = false;
        FacesMessage msg = new FacesMessage("Error! "+ "Please select an image.");  
        FacesContext.getCurrentInstance().addMessage(null, msg);
      
    else 
    System.out.println("going to file upload"+uploadFile.getFileName()+"---hiddenKey"+keyFileName);
    if((!uploadFile.getFileName().matches(expression)) ) 
        validFile = false;
        FacesMessage msg = new FacesMessage("Error! "+ uploadFile.getFileName() + " is not an image.");  
        FacesContext.getCurrentInstance().addMessage(null, msg);
    
    if(uploadFile.getSize() > 1000000) 
        validFile = false;
        FacesMessage msg = new FacesMessage("Error! "+ uploadFile.getFileName() + " size is too large.");  
        FacesContext.getCurrentInstance().addMessage(null, msg);
    

    if (validFile) 
        // Do what you want with the file        
        try 
            //String extn =uploadFile.getFileName().substring(uploadFile.getFileName().lastIndexOf("."));


            copyFile(uploadFile.getFileName(), uploadFile.getInputstream());

            FacesMessage msg = new FacesMessage("Success! "+ uploadFile.getFileName() + " is uploaded.");  
            FacesContext.getCurrentInstance().addMessage(null, msg);
         catch (IOException e) 
            e.printStackTrace();
            FacesMessage msg = new FacesMessage("Error! "+ uploadFile.getFileName()+ " not uploaded.");  
            FacesContext.getCurrentInstance().addMessage(null, msg);
        
    
    
  

我的问题是，我单击了命令按钮，并且未调用支持 bean 中的方法。 如果我使用ajax="false"，则调用该方法，但页面已刷新。

如何同时使用ajax="true" 和<p:fileUpload>？

【问题讨论】：

您不需要在commandButton 上显式设置ajax=true。默认情况下ajax=true 即使您设置与否。尝试删除ajax=true。并且actionListner 需要关联到ActionEvent

【参考方案1】：

<p:fileUpload mode="simple"> 不支持 ajax。抱歉，故事到此结束。

如果切换到兼容 ajax 的 <p:fileUpload mode="advanced"> 确实不是一个选项，那么最好的选择是升级到 JSF 2.2 并改用其新的原生 <h:inputFile> 组件。它还显示在浏览器默认外观中，并且能够通过隐藏的 iframe 技巧模拟 ajax 体验。

另见：

How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null

---

与具体问题无关，您的 fileUpload() 操作方法中的这两个参数完全没有必要。只是

action="#itemBean.fileUpload"

与

public void fileUpload() 
    // ...

删除 process="@this" 属性后效果会很好。

【讨论】：

通过隐藏的 iframe 技巧模拟 ajax 体验？你能解释一下吗？谢谢