我想使用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>
// -------- Backing 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>
我尝试了很多来找到问题，但我找不到解决方案
答案 0 :(得分：1)
PrimeFaces已经捆绑了jQuery和jQuery UI。它可能与您手动添加的jQuery库冲突，从而导致依赖于jQuery协助的所有PrimeFaces组件失败。此外，jQuery数据表的价值值得怀疑，因为PrimeFaces <p:dataTable>几乎支持jQuery DataTables插件所支持的几乎所有内容。浏览the <p:dataTable> showcase以了解其所有功能。
使用PrimeFaces时，并不需要手动使用jQuery和jQuery UI。它已经附带了一组基于jQuery UI的丰富UI组件。您应该查看PrimeFaces为特定功能要求提供的组件并使用它。
答案 1 :(得分：0)
当我想将它与JSF模板一起使用时，我遇到了同样的问题。我找到了解决方案。使用正则表达式
时会出现此问题 allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
当您使用<ui:param name="allowType" value="/(\.|\/)(rptdesign)$/" />参数化allowType时，它会将"\."替换为"."（不带斜线的点）。
我已经使用下面的双斜杠发送了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>`