web-dev-qa-db-ja.com

JSF 2.0ファイルのアップロード

JSF 2.0を使用してファイルをアップロードする方法を見つけるために、いくつかのブログを調べていますが、すべてのソリューションは混乱を招きます。ファイル（MP3、PDF、ビデオなど）を正常にアップロードし、@ Lobとしてデータベースに保存するには、正確に何が必要かを知りたいと思います。これは私がこれまでにやったことです：

  • タイプbyte []の属性を持つエンティティを作成し、@ Lobアノテーションも付けられています。

  • パラメータとしてbyte []を持つメソッドでエンティティを導入し、EntityManagerクラス（persistメソッド）を使用してデータベースに挿入するEJBを作成しました。

  • タイプが「ファイル」の入力タグと送信ボタンを持つJSFページを作成しました

  • ファイルに関する情報をJSFページと交換するマネージドBeanを準備しました。

今、私は立ち往生しており、私は多くの疑問を持っています：

  • JSFからマネージドBeanにファイルを渡してからbyte []に​​変換するにはどうすればよいですか（EJBに処理できるようにするには）。

  • サーブレットはどのように役立ちますか？

  • これを行うにはサーブレットが必要ですか？

  • また、いくつかのブログでサーブレット3.0について言及していることがわかりましたが、作業環境がそれを使用しているかどうかわかりません。サーブレット3.0を使用している場合（JEE6を使用している場合）

以前にファイルをアップロードしたことはなく、サーブレットについてもあまり詳しくありません。私は混乱しています、誰かが私にいくつかの開始のヒントを与えてくれますか？

jsffile-uploadjsf-2
33
sfrj

まず、この（古い）質問と回答はJSF 2.0/2.1を前提としています。 JSF 2.2以降、サードパーティのコンポーネントライブラリを必要としないネイティブ<h:inputFile>コンポーネントがあります。 JSF 2.2 <h：inputFile>を使用してファイルをアップロードする方法？保存されたファイルはどこにありますか？

最も簡単な方法は、 JSF 2.0のトマホーク を使用することです。 <t:inputFileUpload> コンポーネントを提供します。

手順を追ったチュートリアルを次に示します。

  • サーブレット3.0およびJSF 2.0用の空の動的Webプロジェクトを作成します。 web.xmlはServlet 3.0仕様に準拠し、JSFサーブレットがすでに含まれている必要があります。

    <?xml version="1.0" encoding="UTF-8"?>
<web-app 
    xmlns="http://Java.Sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://Java.Sun.com/xml/ns/javaee http://Java.Sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="YourProjectName" version="3.0">

    <display-name>Your Project Name</display-name>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

</web-app>

    faces-config.xmlはJSF 2.0仕様に準拠する必要があります。

    <?xml version="1.0" encoding="UTF-8"?>
<faces-config
    xmlns="http://Java.Sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://Java.Sun.com/xml/ns/javaee http://Java.Sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
    version="2.0">

</faces-config>

  • ダウンロード JSF 2.0のトマホーク1.1.1 。 Zipファイルを抽出し、/libフォルダーに移動して、すべての*.jarファイルを/WEB-INF/libにコピーします。

    これは18個のファイルであり、そのうちbatik*.jarおよびxml*.jarはt:inputFileUploadコンポーネントを単独で使用するためには不要です。それらを残すことができます。

  • web.xmlでTomahawk拡張フィルターを構成します。 multipart/form-dataリクエストの処理を担当するのは、HTTP経由でファイルを送信できるようにするために必要なものです。

    <filter>
    <filter-name>MyFacesExtensionsFilter</filter-name>
    <filter-class>org.Apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>MyFacesExtensionsFilter</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

    <servlet-name>は、<servlet-name>で定義したとおり、FacesServletの正確なweb.xmlと一致する必要があることに注意してください。

  • 単純なFacelet upload.xhtmlを作成します。

    <!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://Java.Sun.com/jsf/core"
    xmlns:h="http://Java.Sun.com/jsf/html"
    xmlns:t="http://myfaces.Apache.org/tomahawk"
    xmlns:ui="http://Java.Sun.com/jsf/facelets">
    <h:head>
        <title>Tomahawk file upload demo</title>
    </h:head>
    <h:body>
        <h:form enctype="multipart/form-data">
            <t:inputFileUpload value="#{bean.uploadedFile}" />
            <h:commandButton value="submit" action="#{bean.submit}" />
            <h:messages />
        </h:form>
    </h:body> 
</html>

    enctype="multipart/form-data"の<h:form>属性に注意してください。これは、HTTPでファイルを送信できるようにするために非常に重要です。

  • シンプルなマネージドBean com.example.Beanを作成します。

    package com.example;

import Java.io.IOException;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

import org.Apache.commons.io.FilenameUtils;
import org.Apache.myfaces.custom.fileupload.UploadedFile;

@ManagedBean
@RequestScoped
public class Bean {

    private UploadedFile uploadedFile;

    public void submit() throws IOException {
        String fileName = FilenameUtils.getName(uploadedFile.getName());
        String contentType = uploadedFile.getContentType();
        byte[] bytes = uploadedFile.getBytes();

        // Now you can save bytes in DB (and also content type?)

        FacesContext.getCurrentInstance().addMessage(null, 
            new FacesMessage(String.format("File '%s' of type '%s' successfully uploaded!", fileName, contentType)));
    }

    public UploadedFile getUploadedFile() {
        return uploadedFile;
    }

    public void setUploadedFile(UploadedFile uploadedFile) {
        this.uploadedFile = uploadedFile;
    }

}

それであるはずです。 http：// localhost：8080/projectname/upload.xhtml で開きます。

具体的な質問：

JSFからマネージドBeanにファイルを渡してからbyte []に​​変換するにはどうすればよいですか（EJBに処理できるようにするには）？

これは上記の回答です。

サーブレットはどのように役立ちますか？

HTTPリクエスト/レスポンスを処理および制御できます。 JSF環境では、FacesServletがすでにすべての作業を行っています。

これを行うにはサーブレットが必要ですか？

JSF環境では、FacesServletは必須です。ただし、APIによって既に提供されているため、自分で作成する必要はありません。ただし、データベースからファイルをダウンロードできるようにするには、別のサーブレットが間違いなく役立ちます。ここに基本的な例を見つけることができます： 静的コンテンツを提供するためのサーブレット 。

また、いくつかのブログでサーブレット3.0について言及していることがわかりましたが、私の作業環境がそれを使用しているかどうかわかりませんが、サーブレット3.0を使用している場合はどうすればよいですか（JEE6を使用していますか？）

Glassfish 3、JBoss AS 6、Tomcat 7などのServlet 3.0コンテナを使用しており、web.xmlがServlet 3.0として宣言されている場合、間違いなくServlet 3.0を使用しています。サーブレット3.0は、Java EE 6。

70
BalusC

完全を期すために、完全に機能する 自己完結型 非AjaxおよびAjaxリクエストのいずれかでJSF 2.2でこれを行う方法の例を提供したいだけです。 JSF 2.2は異なるネームスペースを使用し、 Servlet 3.0コンテナで作業する必要がある （Tomcat 7.0.x、JBoss AS 6.xおよび7.x、GlassFish 3.xと同様）を使用することに注意してください。

fileUpload.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
    <h:form enctype="multipart/form-data">
        <h:inputFile value="#{uploadBean.file}" />
        <h:commandButton value="Post Upload" action="#{uploadBean.upload}" />
    </h:form>
    <h:form enctype="multipart/form-data">
        <h:inputFile value="#{uploadBean.file}" />
        <h:commandButton value="Ajax Upload">
            <f:ajax listener="#{uploadBean.upload}" execute="@form"
                render="countOutput" />
        </h:commandButton>
    <!-- Counts the uploaded items -->
    <h:outputText id="countOutput"
        value="Files uploaded #{uploadBean.filesUploaded}" />
    </h:form>
</h:body>
</html>

UploadBean.Java:

@ManagedBean
@ViewScoped
public class UploadBean {

    private int filesUploaded = 0;

    //javax.servlet.http.Part (Servlet 3.0 API)
    private Part file;
    private String fileContent;

    /**
     * Just prints out file content
     */
    public void upload() {
        try {
            fileContent = new Scanner(file.getInputStream())
                    .useDelimiter("\\A").next();
            System.out.println(fileContent + " uploaded");
            filesUploaded++;
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public int getFilesUploaded() {
        return filesUploaded;
    }

    public Part getFile() {
        return file;
    }

    public void setFile(Part file) {
        this.file = file;
    }
}

以下も参照してください：

8
Xtreme Biker

Tomahawkの<t:inputFileUpload> または PrimeFaces <p:fileUpload> 。

BalusCには、 JSF 2.0およびServlet 3.0でのファイルのアップロードに関する素敵なブログ投稿もあります。

3
Mark

BalusCのブログ投稿： JSF 2.0とServlet 3.0でファイルをアップロードする は、Spring WebFlowでRichFaces 4 fileUploadタグを実行するのに問題があったため、私を救ったものです。

BalusCのコードを修正してSpringのMultipartResolverを使用することは価値があります。 別のブログ投稿 からのMultipartMapは必要ありません。

decodeのFileRendererメソッドを次のように変更することで実現しました。

    UploadedFile ret = null;

    Object req = context.getExternalContext().getRequest();
    if (req instanceof MultipartHttpServletRequest) {
      MultipartFile file = ((MultipartHttpServletRequest)req).getFile(clientId);

      File temp = null;
      try {
        temp = File.createTempFile("_UPLOAD_", null);
        file.transferTo(temp);

        String name = new File(file.getOriginalFilename()).getName();
        ret = new UploadedFile(temp, name);

      } catch (IOException e) {
        throw new RuntimeException("Could not create temp file.", e);
      }
    } else {
      throw new IllegalStateException("Request is not multipart. Use spring's multipart resolver.");
    }
    // If no file is specified, set empty String to trigger validators.
    ((UIInput) component).setSubmittedValue( ret == null ? EMPTY_STRING : ret);

UploadedFileは、バッキングBeanに結果を返すために使用される単純なシリアル化可能なPOJOです。

2
Maciek Łoziński

JSF 2.2では、commons-ioまたはフィルターを使用せずに、タグを使用してファイルを簡単にアップロードできます。このタグは、通常プロセスとajaxプロセスの両方をサポートします。

通常：

    <h:inputFile id="file"  value="#{fileUploadBean.uploadedFile}"/> 
    <h:commandButton id="button" action="#{fileUploadBean.sumbit()}" value="Upload"/>

Ajax：

    <h:inputFile id="file" value="#{fileUploadBean.uploadedFile}"/> 
    <h:commandButton id="button" value="submit">
      <f:ajax execute="@all" render="@all" onevent="statusUpdate"/>
    </h:commandButton>

次のようにマネージドBeanを設計します。

  @Named
  @RequestScoped
  public class FileUploadBean {

   private Part uploadedFile;

  }
2
Masudul

プロジェクトのビルドパスにcommons-fileupload-1.2.1.jarを追加する必要があります

1. web.xmlファイルを構成します。

Web.xml

    <filter>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
    </filter-mapping>
    <mime-mapping>        
        <extension>png</extension>
        <mime-type>image/png</mime-type>
    </mime-mapping>

2. ManagedBeanを作成する

   @ManagedBean
   @SessionScoped
public class FileUploadBean implements Serializable{
public FileUpload (){
}
  private StreamedContent file;
public void loadFile(FileUploadEvent event) throws IOException, InterruptedException {

        InputStream input = new ByteArrayInputStream(event.getFile().getContents());
        file= new DefaultStreamedContent(input, "image/jpg");
    }
}

3.jsfファイル（xhtml）

   <h:form enctype="multipart/form-data"> 
         <p:fileUpload fileUploadListener="#{fileUploadBean.file}" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|bmp)$/"/>
        </h:form>
0
user2354035

最も簡単な方法は、おそらくMyFacesにあるinputFileUploadタグを使用することです。

http://myfaces.Apache.org/

0
Vladimir Ivanov

IceFaces2.0には http://wiki.icefaces.org/display/ICE/FileEntry がまだ実装されていませんが、ダウンロードにはサンプルアプリが含まれており、Tomcat 6（サーブレット）で動作します2.5（JEE6ではない）

0
JimO