2012-03-01 14 views
3

<p:fileUpload>を使用してJSF2.0/Primefacesを使用してファイルをアップロードしたいとします。私は私を助けることができる文書を見つけられませんでした。JSF/Primefacesを使用してファイルをアップロードするにはどうすればよいですか?

私は2つのテーブルがあります。私が達成したいPerson(name,lastnam....)file(id,path,name,size) シナリオは次のとおりです。

  • ユーザーが自分のウェブサイトに加入し、私は、ファイルを含む彼の情報を保存したファイルがある場合は
  • をアップロードアップロードされた、私は
(ユーザーと自分のファイル間の関係を維持するために)私のディスクに保存し、私のデータベースに パスを保存したいです

ボタンボタンを押すと、この情報がすべて保存されます。ここで

は私のindex.xhtml

<h:form > 
    <p:panel header="Add User" style="width: 500px; font-size: 14px"> 
     <h:panelGrid width="width: 300px;" columns="2"> 


     <h:outputLabel style="font-size: 13px" value="Name" /> <h:inputText value="#{AddPerson.lastname}" /> 
     <h:outputLabel value="LastName"/> <h:inputText value="#{AddPerson.name}" /> 

      <h:outputLabel value="Marital Status"/> 
      <h:selectOneMenu id="status" value="#{AddPerson.status}"> 
      <f:selectItem itemValue="Single" itemLabel="Single"/> 
      <f:selectItem itemValue="Married" itemLabel="Married"/> 
      </h:selectOneMenu> 

      <h:outputLabel value="Bith date "/> <p:calendar value="#{AddPerson.birthdate}" id="popupButtonCal" showOn="button" /> 
      <h:outputLabel value="email"/><h:inputText value="#{AddPerson.email}" /> 
      <h:outputLabel value="mobile"/><h:inputText value="#{AddPerson.mobile}" /> 
      <h:outputLabel value="fax"/><h:inputText value="#{AddPerson.fax}" /> 
      <h:outputLabel value="Job"/><h:inputText value="#{AddPerson.Job}" /> 
      <h:outputLabel value="addresse"/><h:inputText value="#{AddPerson.addresse}" /> 
      <h:outputLabel value="code"/><h:inputText value="#{AddPerson.code}" /> 
      <h:outputLabel value="Country"/><h:inputText value="#{AddPerson.country}" /> 
      <h:outputLabel value="login"/><h:inputText value="#{AddPerson.login}" /> 
      <h:outputLabel value="password"/><h:inputText value="#{AddPerson.password}" /> 

      <h:outputLabel value="CV"/> <input type="file" name="uploaded_file"/> 
      <p:fileUpload fileUploadListener="#{AddPerson...." update="messages" sizeLimit="500000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/> 
      <p:growl id="messages" showDetail="true"/>  // **example :taken from primefaces showcases** 

      <h:commandButton action="#{AddPerson.addUserDB}" value="Add User" /> 

     </h:panelGrid> 
     </p:panel> 
</h:form> 

であり、ここでMy bean

public void addUserDB() { 
    try { 

     EntityTransaction entr = em.getTransaction(); 
     entr.begin(); 

     Person user = new Person(); 

     user.setNom(lastname); 
     user.setPrenom(name); 
     user.setCodepostal(code); 
     user.setEmail(email); 
     user.setEtatCivil(status); 
     user.setFax(fax); 
     user.setDateNaissance(birthdate); 
     user.setMobile(mobile); 
     user.setAdresse(addresse); 
     user.setPays(country); 
     user.setLogin(login); 
     user.setPassword(password); 

     //**I should also add here the path of the file to the table and save the file on the disc !!!!**   

     em.persist(user); 

     entr.commit(); 
    } catch (Exception e) { 
     System.out.println(e.getMessage()); 
     System.out.println("Failed"); 
    } finally { 
     em.close(); 
    } 

} 
+2

PrimeFacesは、具体的な例でショーケースを持っています。 html – BalusC

+0

WEB-INF/libの下に2つのjarファイルを追加しましたか? common-fileupload.jarとcommon.io.jar –

答えて

10

どこfileUploadListenerの実装はありますでしょうか?私は通常次のようにします:

<p:fileUpload cancelLabel="#{msg['cancel']}" update="someComponent" 
fileUploadListener="#{someBean.uploadListener}" 
multiple="false" sizeLimit="1000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" /> 

次に、私のBeanにはファイルアップロードイベントを処理するメソッドがあります。このような何か:

public void fileUpload(FileUploadEvent event) throws IOException { 
    String path = FacesContext.getCurrentInstance().getExternalContext() 
      .getRealPath("/"); 
    SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmss"); 
    String name = fmt.format(new Date()) 
      + event.getFile().getFileName().substring(
        event.getFile().getFileName().lastIndexOf('.')); 
    File file = new File(path + "catalogo_imagens/temporario/" + nome); 

    InputStream is = event.getFile().getInputstream(); 
    OutputStream out = new FileOutputStream(file); 
    byte buf[] = new byte[1024]; 
    int len; 
    while ((len = is.read(buf)) > 0) 
     out.write(buf, 0, len); 
    is.close(); 
    out.close(); 
} 

だけ保存され、addUserDB()メソッドに対応するユーザープロパティを設定するためにそれを使用されたファイルパスへの参照をしてください。それは本当に2つのステップのプロセスです。最初にファイルをサーバーのどこかに保存してから、ユーザーを保存します。

+0

これを試しましたが、ファイルはD:\ MyDocuments \ MySites \ MySiteExample \ build \ web \ eventImage137.jpgに保存されました。 BUILDフォルダが、実際のWebフォルダにありますか? – vtomic85

+2

本当にどこでも保存できます。それに応じてパス変数を設定するだけです。あなたが別のOSを持つ別のサーバーでこれを実行させると困るかもしれないので、ハードコーディングしないでください。環境変数やjavaパラメータを使用して、ファイルを保存する場所を設定することができます。 – Andre

+0

こんにちは@Andreは、 "ファイルを保存する場所を設定するための環境変数またはjavaパラメータを使用する"ことを明確にすることができます。 –

3

fileUploadにはfileUploadListenerがあります。バッキングBeanにファイルの内容を保存するロジックを実装する必要があることに注意してください。 http://www.primefaces.org/showcase/ui/fileUploadHome.jsf PrimeFacesまたユーザーガイドがあります:http://www.primefaces.org/documentation

<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}"> 

public class FileBean { 
    public void handleFileUpload(FileUploadEvent event) { 
     UploadedFile file = event.getFile(); 
     String fileName = file.getFileName(); 
     long fileSize = file.getSize(); 
     InputStream myInputStream = file.getInputstream(); 
     //Save myInputStream in a directory of your choice and store that path in DB 
    } 
}