2014-09-26 105 views
0

上传图片后出现问题。上传时不会刷新图像。这个bean是会话作用域的,上传后我需要手动刷新页面才能看到新的图像。如何在图像/文件上传后自动刷新图形图像?谢谢Primefaces上传文件 - 上传后图片不刷新

下面的代码能够成功上传的图片,但以前的图像仍然清晰可见,只有刷新后的新图像可以看到:

平台: JSF 2.2 ,tomcat的7.37 ,primefaces 5.0

<h:form id="form" enctype="multipart/form-data"> 
     <p:growl id="growl_1" showDetail="true"/>  

    <p:panelGrid id="pg_photo" 
       style="margin-bottom:10px; 
       width: 50em" 
       styleClass="panelGridCenter"> 
      <f:facet name="header"> 
       <p:row> 
        <p:column> 
         <p:graphicImage 
          id="gi_etud" 
          width="150" 
          height="120" 
          value="#{etudiantProfilView.imageEtudAsStream}"/> 
        </p:column> 
        <p:column> 
         <p:fileUpload id="fu_photo" 
             value="#{etudiantProfilView.imageEtudUF}" 
             mode="advanced" 
             dragDropSupport="true" 
             fileLimit="10" 
             sizeLimit="100000" 
             allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
             auto="true" 
             update="growl_1 gi_etud" 
             fileUploadListener="#{etudiantProfilView.imageUploadListener}" 
             > 
         </p:fileUpload> 
        </p:column> 
       </p:row> 
      </f:facet> 
     </p:panelGrid> 
</h:form> 

会话bean:

@ManagedBean 
@SessionScoped 
public class EtudiantProfilView implements Serializable { 
//some stuff 
public void imageUploadListener(FileUploadEvent event) throws IOException { 
//save the image to the hard disk 
} 
//some stuff 
} 

回答

1

我甲肝e通过向uploadFile组件添加“重新加载”动作来解决刷新问题:

<p:fileUpload id="fu_photo" value="#{etudiantProfilView.imageEtudUF}" 
             mode="advanced" 
             dragDropSupport="true" 
             fileLimit="10" 
             sizeLimit="200000" 
             allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
             auto="true" 
             update="@form" 
             oncomplete="window.location.reload();" 
             fileUploadListener="#{etudiantProfilView.imageUploadListener}" 
             > 
         </p:fileUpload>