Jsf 多次调用fileUpload事件
使用PrimeFaces fileUpload控件上载文件时出现问题 问题是当我上传文件时,上传事件被调用了4次 我找不到明确的理由 这是我的xhtml页面:Jsf 多次调用fileUpload事件,jsf,file-upload,primefaces,Jsf,File Upload,Primefaces,使用PrimeFaces fileUpload控件上载文件时出现问题 问题是当我上传文件时,上传事件被调用了4次 我找不到明确的理由 这是我的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"&
<?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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>
<h:body>
<ui:composition template="home.xhtml">
<ui:define name="content">
<script type="text/javascript">
function callChangeImage(){
alert('completed');
var hiddenLink = document.getElementById('mainForm:hiddenLink');
hiddenLink.click();
}
function callDeleteImageFromTemp(){
alert('started');
updated = false;
var hiddenLink2 = document.getElementById('mainForm:hiddenLink2');
hiddenLink2.click();
}
</script>
<p>
<p:commandButton value="Agregar Noticia" update="newsTable, display" icon="ui-icon-circle-plus" actionListener="#{newsBean.addNew}" oncomplete="newDialog.show()"/>
<p:commandButton value="Editar Noticia" oncomplete="editNewDialog.show()" icon="ui-icon-pencil"/>
<p:commandButton value ="Eliminar Noticia" icon="ui-icon-trash" onclick="dlgDelete.show()" />
</p>
<p:scrollPanel>
<p:dataTable var="unew" value="#{newsBean.news}" rowKey="#{unew.id}"
selection="#{newsBean.selectedNew}" selectionMode="single" id="newsTable">
<p:ajax event="rowSelect" update=":mainForm:display" />
<f:facet name="header">
Lista de noticias
</f:facet>
<p:column headerText="Numero" sortBy="#{unew.id}" filterBy="#{unew.id}" id="id">
#{unew.id}
</p:column>
<p:column headerText="Titulo" sortBy="#{unew.title}" filterBy="#{unew.title}" id="title">
#{unew.title}
</p:column>
<p:column headerText="Descripcion" sortBy="#{unew.description}" filterBy="#{unew.description}" id="description">
#{unew.description}
</p:column>
<p:column headerText="Enlace" sortBy="#{unew.link}" filterBy="#{unew.link}" id="link">
#{unew.link}
</p:column>
<p:column headerText="Imagen" sortBy="#{unew.img}" filterBy="#{unew.img}" id="img">
#{unew.img}
</p:column>
</p:dataTable>
</p:scrollPanel>
<p:dialog widgetVar="dlgDelete" header="Desea eliminar la noticia #{newsBean.selectedNew.id}?">
<p:panel style="text-align: center">
<p:commandButton value="Si" update="newsTable" action="#{newsBean.removeNew}" oncomplete="dlgDelete.hide()" />
<p:commandButton value="No" onclick="dlgDelete.hide()" type="button" />
</p:panel>
</p:dialog>
<p:dialog header="Editar Noticia" widgetVar="editNewDialog" resizable="false"
showEffect="explode" hideEffect="explode" onHide="">
<p:ajax event="close" listener="#{fileUploadBean.deleteFileFromTemp}" update="messages"/>
<p:ajax event="close" listener="#{newsBean.deleteImageFromTemp}" update="messages"/>
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<p>Noticia #{newsBean.selectedNew.id}</p>
<p>
<p:commandLink id="editImage">
<p:graphicImage id="imageNew" value="/temp/#{newsBean.selectedNew.img}" />
</p:commandLink>
<p:overlayPanel id="editImagePanel" for="editImage" hideEffect="fade">
<table cellpadding="5px">
<tr>
<td>
<p:commandButton title="Eliminar Imagen" update="imageNew" actionListener="#{newsBean.removeImage}" icon="ui-icon-trash"/>
</td>
<td>
<p:fileUpload
fileUploadListener="#{fileUploadBean.handleFileUpload}"
mode="advanced"
sizeLimit="1000000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
cancelLabel="Eliminar"
uploadLabel="Subir"
label="Buscar..."
dragDropSupport="false"
oncomplete="callChangeImage();"
onstart="callDeleteImageFromTemp();"
auto="true">
</p:fileUpload>
<p:commandLink id="hiddenLink" action="#{newsBean.changeImage(fileUploadBean.uploadedFile.fileName)}" style="display:none" update="imageNew"/>
<p:commandLink id="hiddenLink2" action="#{newsBean.deleteImageFromTemp}" style="display:none"/>
</td>
</tr>
</table>
</p:overlayPanel>
</p>
</f:facet>
<h:panelGrid id="display2" columns="2" cellpadding="4">
<h:outputText value="Titulo:" />
<p:inputTextarea rows="1" cols="60" value="#{newsBean.selectedNew.title}" id="title"/>
<h:outputText value="Descripcion:" />
<p:inputTextarea rows="6" cols="60" value="#{newsBean.selectedNew.description}" id="description"/>
<h:outputText value="Enlace:" />
<p:inputTextarea rows="1" cols="60" value="#{newsBean.selectedNew.link}" id="link"/>
</h:panelGrid>
<f:facet name="footer">
<p:commandButton value="Guardar" update="newsTable" actionListener="#{newsBean.saveNewEdit}" oncomplete="newDialog.hide()">
<p:ajax listener="#{fileUploadBean.writeUploadedFile('/images/news/', newsBean.selectedNew.id)}" update="messages"/>
</p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
</ui:define>
</ui:composition>
</h:body>
</html>
如果执行此页面并尝试上载文件,则函数“beforeUpload”和“afterUpload”中的javascript“警报”将显示4次
这导致图像中出现闪烁,并随文件上载而更新
我会感谢任何人的帮助,因为我有点被这个绊倒了
谢谢你的帮助
一点背景:
本页的目的是添加新闻(用于个性化新闻阅读器)。
在此页面中有一个包含新闻的表格,每次选择新行时,都会出现一个对话框来编辑新行
在这个对话框中,你有新的和其他东西的图像
目标是在编辑器中单击图像时,会出现一个覆盖面板,其中包含上载新图像或删除当前图像的选项
标题为“Eliminar Imagen”的commandButton将删除新文档的图像。
fileUpload为新文件上载新图像。
因此,它们都应该在前端编辑器对话框中更新新的映像。在JSF生命周期中,在以下阶段多次调用操作侦听器:
Apply request values phase; **process events**
Process validations phase; **process events**
Update model values phase; **process events**
Invoke application phase; **process events**
请花一些时间来最小化代码,并删除所有使示例混乱的不相关部分。最可能的情况是,您通过单击多次提交页面。我认为一个来自fileUpload组件的actionListener属性,另一个来自commandButton的操作。尝试移除其中一个。如果不是这样,请解释你的行为。嗨!谢谢你的回答。我正在更新这篇文章,并提供更多的解释。我不能减少代码,因为如果是这样的话,没有什么是可以理解的。
Apply request values phase; **process events**
Process validations phase; **process events**
Update model values phase; **process events**
Invoke application phase; **process events**