1

p:fileUploadを使用して、アプリケーションに画像をアップロードしたいと思います。

ここでは、正しく機能するデモプログラムを作成します。しかし、JSFテンプレート内に配置すると、外観が変更され、FileUploadEventが呼び出されません。

これが私のjsfページです:(動作中)// ------------

<h:form enctype="multipart/form-data">  
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
                          mode="advanced"   
                          update="messages"  
                          sizeLimit="100000"   
                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                          auto="true"/>  

            <p:growl id="messages" showDetail="true"/>  
</h:form> 

//--------バッキングBean

@ManagedBean
public class FileUploadController
{
public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, msg);
        try {
            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 + "/" + name);            
            this.setFileName(name);
            this.setState(Boolean.TRUE);
            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();

        } catch (Exception e) {
            System.out.println("Exception in file io");
        }

    }
}

// -------テンプレート内に配置すると、次のように機能しません

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
<ui:composition template="/layout/homeLayout.xhtml">
    <ui:define name="content">
        <h:form enctype="multipart/form-data">  
            <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
                          mode="advanced"   
                          update="messages"  
                          sizeLimit="100000"   
                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                          auto="true"/>  

            <p:growl id="messages" showDetail="true"/>  
            <br/>                                    
        </h:form> 
    </ui:define>
</ui:composition>
</h:body>
</html>

// -------これが私のhomeLayout.xhtml(テンプレート)です

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />

        <!--        JQuery Data Table Dependencies START-->
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_page.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_table_jui.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui-1.7.3.custom.min.js"></script>

        <script type="text/javascript">                
            $(document).ready(function () {                    
                $("#dataTbl1").dataTable({                        
                    "sPaginationType": "full_numbers",
                    "bJQueryUI": true
                });                    
            });
        </script>
        <!--        JQuery Data Table Dependencies END-->

        <title>Facelets Template</title>
    </h:head>

    <h:body>

        <div id="top">
            <ui:insert name="top">
                <h:graphicImage url="#{facesContext.externalContext.requestContextPath}/resources/images/loginUser.png"/>
                <h:outputText value="Jewellery Shop" style="font-size: x-large;font-family: Monotype-Corsiva"/>                
                <ui:include src="../pages/common/userMenu.xhtml"/>                
            </ui:insert>
        </div>

        <div id="content" class="center_content">
            <ui:insert name="content">Content</ui:insert>
        </div>

        <div id="bottom">
            <ui:insert name="bottom">Bottom</ui:insert>
        </div>

    </h:body>

</html>

私は何が問題なのかを見つけるためにたくさん努力しますが、私は解決策を見つけることができません

4

2 に答える 2

1

PrimeFacesには、jQueryとjQueryUIがバンドルされています。手動で追加したjQueryライブラリと競合している可能性があるため、jQueryの支援に依存するすべてのPrimeFacesコンポーネントが失敗します。<p:dataTable>また、PrimeFacesはjQuery DataTablesプラグインでもサポートされているほとんどすべてを実質的にサポートしているため、jQuerydatatablesの価値には疑問があります。ショーケースを探索して<p:dataTable>、そのすべての機能について学びます。

PrimeFacesを使用する場合、jQueryおよびjQueryUIを手動で使用する必要はありません。すでに、jQueryUIに基づく豊富なUIコンポーネントの大きなセットが付属しています。代わりに、PrimeFacesが特定の機能要件に対して提供するコンポーネントを調べて使用する必要があります。

参照:

于 2012-05-04T14:23:01.473 に答える
0

JSFテンプレートで使用したいときに同じ問題に直面しました。私は解決策を見つけました。正規表現を使用すると問題が発生します

allowTypes="/(\.|\/)(gif|jpe?g|png)$/"

allowTypeをでパラメーター化すると、 with (スラッシュなしのドット)<ui:param name="allowType" value="/(\.|\/)(rptdesign)$/" />に置き換えられます。"\.""."

以下のようにダブルスラッシュでallowType値を送信しましたが、正常に機能しています。

    <ui:include src="path_to_dialogUploadFiles.xhtml" >
    <ui:param name="name" value="UploadDesign" />
    <ui:param name="header" value="Header value" />
    <ui:param name="fileUploaderListenerBean" value="#{listenerBean}" />                    
    <ui:param name="commandButtonValue" value="Upload" />
    <ui:param name="isMultiple" value="true" />
    <ui:param name="allowType" value="/(\\.|\\/)(gif|jpe?g|png)$/" /> 
    </ui:include>`
于 2015-01-29T12:33:30.913 に答える