2014-09-26 62 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>