JSF2上传带有primefaces问题的照片

时间:2013-02-19 11:42:23

标签: jsf-2

我正在使用以下代码段上传照片,使用primefaces:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
    <h:outputText value="PrimeFaces Single Upload"  />
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{uploadPhotoHandler.handleFileUpload}" mode="advanced"
            update="messages" label="Choose a file" sizeLimit="5242880" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
            invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
            invalidFileMessage="You are allowed to upload only images !" />
        <p:growl id="messages" showDetail="true" sticky="true" />

我将使用以下命令将此合成添加到主页面index.xhtml中:<ui:include src="upload_img_form.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 lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.xdr-transport.js"></script>
    <script type="text/javascript" src="js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="themes/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
    <link type="text/css" rel="stylesheet" href="themes/jquery-ui-1.10.0.custom/css/sunny/jquery-ui-1.10.0.custom.css" />
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type=" text/css" rel="stylesheet" href="css/styles.css" />
</h:head>
<h:body>
    <div id="container" class="container ">
        <ui:include src="upload_img_form.xhtml" />
    </div>
</h:body>
</html>

我有以下问题:

  • 进度条不起作用,
  • 取消按钮不起作用,最大的问题是sizeLimit,它不验证作为输入提供的文件。
  • 即使这不是自动加载,文件也会自动加载,而不会点击上传按钮。

问题与head部分100%相关,因为如果删除它,则可以正常工作。但是,它不适用于同一页面中的其他功能,因此我必须保留js个文件和styles

感谢您的回复。

1 个答案:

答案 0 :(得分:1)

摆脱手动包含的jQuery。 PrimeFaces已经自动包含自己的副本。如果它们是不同的版本,它只会发生冲突,导致所有颜色的JS相关问题。如果您在浏览器的开发人员工具集中检查了JS控制台,您会注意到它。