如何使用Ajax檢測JSF2.0中的文件上傳完成事件

Question

希望你們一切都好。其實我想上傳圖像文件從系統到數據庫。但我想，當用戶上傳文件，然後文件沒有直接進入數據庫，但選擇文件後。文件可能會保存到一些temporery的位置，所以當用戶點擊保存按鈕，然後我將所有的圖像移動到數據庫。我正在使用JSF 2.0和PrimeFaces。我在某人的博客上找到了代碼。代碼的作用是在上傳文件後將其轉換爲byte []數組。我將這個字節數組保存在一個列表中，所以保存按鈕我從列表中獲取圖像。

下面是代碼

private StreamedContent image; 

public StreamedContent getImage() { 
    return image; 
} 

public void setImage(StreamedContent image) { 
    this.image = image; 
} 

public String imageUpload(FileUploadEvent event) { 

    try { 

     // Convert file from input stream to bytes 
     byte[] byteArray = InputStreamToByte(event.getFile().getInputstream()); 

     /** 
     * Add images to list so we can retrieve them when user click on save button 
     */ 
     boolean add = images.add(new Images(byteArray)); 


     /** 
     * Class.forName("org.postgresql.Driver"); 
      String url = "jdbc:postgresql://x.x.x.x:5432/MYDB"; 
      Connection oConnection = DriverManager.getConnection(url, "username", "password"); 
      System.out.println("Sucessfully connected to Postgres Database"); 
     * 
     * byte[] bytes = bos.toByteArray(); 
      String sql = "INSERT INTO my_table (byte_array) VALUES (?)"; 
      statement = oConnection.prepareStatement(sql); 
      statement.setBytes(1, bytes); 
      statement.executeUpdate(); 
      System.out.println("Image inserted into database!"); 
     */ 

     //byteArray used to store picture into database 
     InputStream ist = new ByteArrayInputStream(byteArray); 

     /* 
     * StreamedContent Object used to show the picture in jsf pages. We need to convert 
     * again bytearray to InputStream 
     */ 
     image = new DefaultStreamedContent(ist, "image/jpg"); 

     FacesMessage msg = new FacesMessage("Succesful picture is uploaded."); 
     FacesContext.getCurrentInstance().addMessage(null, msg); 

     //we dont need to use faces-config to navigate in jsf 2 
     return null ; 

    } catch (Exception e) { 

     FacesMessage msg = new FacesMessage("Exception happen"); 
     FacesContext.getCurrentInstance().addMessage(null, msg); 

     e.printStackTrace(); 

     return null; 

    } 

} //end of imageUpload() 

這裏是我的.html文件

<h:panelGrid width="30%" columns="3"> 

    <h:outputText value="Map to upload" /> 
    <p:fileUpload id="uploadFile" 
        description="Image" 
        update="messages" 
        allowTypes="*.jpg;*.png;*.gif;*.jpeg;" 
        auto="true" 
        fileUploadListener=#{cityDetail.imageUpload} > 

     <f:ajax event="????" execute="???" render="uploadedInage" /> 

    </p:fileUpload> 

    <p:graphicImage id="uploadedImage" 
        value="#{cityDetail.image}" 


</h:panelGrid> 

現在我想的是，當圖像被完全上傳，圖像也顯示面板電網第三列。爲此，我嘗試使用Ajax。但我不知道我應該使用什麼事件。所以請任何人告訴我事件名稱，我也想要求執行我應該使用「@this」？ 。也告訴我，我的方法是正確的，將二進制圖像保存到列表中，以便當用戶單擊保存按鈕時，然後我檢索所有圖像並將它們發送到數據庫。爲了我的目的，使用Ajax也是正確的想法嗎？

感謝

Answer 1

所以當用戶點擊Save按鈕，然後我把所有的圖像數據庫

然後，只需執行該相應？

<p:commandButton value="save" action="#{cityDetail.save}" /> 

與

public void save() { 
    // Move all images to database. 
}