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 和 jQuery UI。它可能与您手动添加的 jQuery 库发生冲突，从而导致所有依赖 jQuery 帮助的 PrimeFaces 组件失败。jQuery 数据表的价值也值得怀疑，因为 PrimeFaces<p:dataTable>实际上支持几乎所有 jQuery DataTables 插件也支持的东西。探索展示柜以了解其所有功能。<p:dataTable>

使用 PrimeFaces 时，实际上并不需要手动使用 jQuery 和 jQuery UI。它已经附带了大量基于 jQuery UI 的丰富 UI 组件。相反，您应该查看 PrimeFaces 为特定功能要求提供的组件并使用它。

也可以看看：

于 2012-05-04T14:23:01.473 回答
0

当我想将它与 JSF 模板一起使用时，我遇到了同样的问题。我找到了解决方案。使用正则表达式时出现问题

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

当您将 allowType 参数化为时，<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 回答