我试图创建一个使用rich：fileUpload的页面，（令人惊讶地）上传图像，一旦上传完成，我想“隐藏”rich：fileUpload组件并显示jQuery插件jCrop，以便图像可以在保存之前裁剪。一旦从所选的裁剪中保存图像，这两个组件应该再次切换它们的可见性。
但是，我似乎无法将富文件：fileUpload变为'隐藏'。 jCrop组件显示正常，jCrop功能也是如此。但无论我尝试丰富多少：fileUpload仍然显示在屏幕上。实际上，如果我将rendered="#{!uploadAndCrop.newImage}" 添加到rich：fileUpload所在的rich：面板中，似乎没有任何更新。我必须删除它才能显示jCrop组件。
我的代码在下面，它有点乱，因为我尝试了很多不同的东西。如果有人能指出我正确的方向，或者建议更好的方法，我将非常感激。
由于
<ui:define name="head">
<link href="stylesheet/jquery.Jcrop.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
<script language="Javascript">// <![CDATA[ //
{
var $J = jQuery.noConflict();
}
//]]> //</script>
</ui:define>
<ui:define name="body">
<h:form>
<h:panelGrid columns="2" columnClasses="top,top">
<h:panelGroup id="uploadgroup">
<a4j:outputPanel id="uploadpanel">
<rich:panel rendered="#{!uploadAndCrop.newImage}">
<rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}"
maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload"
immediateUpload="#{uploadAndCrop.autoUpload}"
acceptedTypes="jpg, gif, png, bmp"
allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px">
<ui:remove>
onfileuploadcomplete="Richfaces.showModalPanel('croppanel');">
</ui:remove>
<a4j:support event="onuploadcomplete"
reRender="info, uploadgroup, cropgroup" />
</rich:fileUpload>
<h:outputText value="#{uploadAndCrop.newImage}" id="newimage" />
<a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show
ModalPanel</a>
</rich:panel>
</a4j:outputPanel>
</h:panelGroup>
<h:panelGroup id="info">
<rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Uploaded Image Preview" />
</f:facet>
<rich:dataGrid columns="1" value="#{uploadAndCrop.files}"
var="file" rowKeyVar="row">
<rich:panel bodyClass="rich-laguna-panel-no-header">
<h:panelGrid columns="2">
<a4j:mediaOutput element="img" mimeType="#{file.mime}"
createContent="#{uploadAndCrop.paint}" value="#{row}"
style="width:156x; height:71px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
</h:panelGrid>
</rich:panel>
</rich:dataGrid>
</rich:panel>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Clear Uploaded Image" />
</h:panelGroup>
<h:panelGroup id="cropgroup">
<rich:panel rendered="#{uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
<a4j:outputPanel id="crop" layout="inline">
<rich:jQuery selector="#cropbox" timing="immediate"
query="Jcrop()" />
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</a4j:outputPanel>
</rich:panel>
</h:panelGroup>
</h:panelGrid>
<h:commandButton id="save" value="Save"
action="#{uploadAndCrop.save}">
<f:param name="cmsCompanyIdCom" value="" />
</h:commandButton>
<s:button id="cancelEdit" value="Cancel" propagation="end"
view="/CmsCompany.xhtml">
<f:param name="cmsCompanyIdCom" value="" />
</s:button>
</h:form>
<ui:remove>
<rich:modalPanel id="croppanel" width="350" height="240">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Crop Image"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="image">
<ui:remove>
<h:panelGroup>
<h:outputText value="close" />
<rich:componentControl for="croppanel" attachTo="close"
operation="hide" event="onclick" />
</h:panelGroup>
</ui:remove>
</f:facet>
<rich:panel rendered="#{uploadAndCrop.newImage}">
<ui:remove>
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
</ui:remove>
<a4j:outputPanel id="crop" layout="inline">
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<ui:remove>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</ui:remove>
</a4j:outputPanel>
</rich:panel>
<a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide
ModalPanel</a>
</rich:modalPanel>
</ui:remove>
</ui:define>
<ui:define name="head">
<link href="stylesheet/jquery.Jcrop.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
<script language="Javascript">// <![CDATA[ //
{
var $J = jQuery.noConflict();
}
//]]> //</script>
</ui:define>
<ui:define name="body">
<h:form>
<h:panelGrid columns="2" columnClasses="top,top">
<h:panelGroup id="uploadgroup">
<a4j:outputPanel id="uploadpanel">
<rich:panel rendered="#{!uploadAndCrop.newImage}">
<rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}"
maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload"
immediateUpload="#{uploadAndCrop.autoUpload}"
acceptedTypes="jpg, gif, png, bmp"
allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px">
<ui:remove>
onfileuploadcomplete="Richfaces.showModalPanel('croppanel');">
</ui:remove>
<a4j:support event="onuploadcomplete"
reRender="info, uploadgroup, cropgroup" />
</rich:fileUpload>
<h:outputText value="#{uploadAndCrop.newImage}" id="newimage" />
<a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show
ModalPanel</a>
</rich:panel>
</a4j:outputPanel>
</h:panelGroup>
<h:panelGroup id="info">
<rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Uploaded Image Preview" />
</f:facet>
<rich:dataGrid columns="1" value="#{uploadAndCrop.files}"
var="file" rowKeyVar="row">
<rich:panel bodyClass="rich-laguna-panel-no-header">
<h:panelGrid columns="2">
<a4j:mediaOutput element="img" mimeType="#{file.mime}"
createContent="#{uploadAndCrop.paint}" value="#{row}"
style="width:156x; height:71px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
</h:panelGrid>
</rich:panel>
</rich:dataGrid>
</rich:panel>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Clear Uploaded Image" />
</h:panelGroup>
<h:panelGroup id="cropgroup">
<rich:panel rendered="#{uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
<a4j:outputPanel id="crop" layout="inline">
<rich:jQuery selector="#cropbox" timing="immediate"
query="Jcrop()" />
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</a4j:outputPanel>
</rich:panel>
</h:panelGroup>
</h:panelGrid>
<h:commandButton id="save" value="Save"
action="#{uploadAndCrop.save}">
<f:param name="cmsCompanyIdCom" value="" />
</h:commandButton>
<s:button id="cancelEdit" value="Cancel" propagation="end"
view="/CmsCompany.xhtml">
<f:param name="cmsCompanyIdCom" value="" />
</s:button>
</h:form>
<ui:remove>
<rich:modalPanel id="croppanel" width="350" height="240">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Crop Image"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="image">
<ui:remove>
<h:panelGroup>
<h:outputText value="close" />
<rich:componentControl for="croppanel" attachTo="close"
operation="hide" event="onclick" />
</h:panelGroup>
</ui:remove>
</f:facet>
<rich:panel rendered="#{uploadAndCrop.newImage}">
<ui:remove>
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
</ui:remove>
<a4j:outputPanel id="crop" layout="inline">
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<ui:remove>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</ui:remove>
</a4j:outputPanel>
</rich:panel>
<a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide
ModalPanel</a>
</rich:modalPanel>
</ui:remove>
</ui:define>
答案 0 :(得分：2)
我不知道你的uploadAndCrop.newImage方法是怎样的，但你可以使用布尔值并在fileUploadListener上将其设置为false。
但请重新<a4j:outputPanel id="uploadpanel">，而不是<rich:fileUpload>或群组。
<a4j:outputPanel id="uploadpanel" rendered="#{bean.fileUpRendered}">
(...)
<rich:fileUpload...
<a4j:support event="onuploadcomplete"
reRender="info, uploadpanel, cropgroup" />
</rich:fileUpload>
(...)
</a4j:outputPanel>
豆：
Boolean fileUpRendered;
(...)
public void listener(UploadEvent event) throws Exception {
try {
(...)
fileUpRendered = false;
catch (...) { (...) }
}
//Get set
public get/set fileUpRendered() { }...