我的想法是上传一张图片，并根据需要多次显示更新div（包含图片）和ajax。我想这样做是因为我使用了一个视图范围托管bean。当我刷新（f5）视图但从不使用ajax时，我获得了成功。
上面的代码就像一个向导，首先我上传一张图片，第二个我裁剪图片，第三个我显示按钮以保存裁剪图像或重新上传新图片并重新开始或重新拍摄原始图片。
我使用JSF 2.2，PF 5，Spring 4和SWF 2.4
我第一次通过向导工作正常，即使我用ajax更新图片显示，但当我再次使用向导时，新图片被省略，视图显示旧图片。
<h:panelGroup layout="block" id="finalConfigurationContainer" styleClass="finalConfigurationContainer">
<h1>
<h:outputText value="#{msg['configuration1.main.header']}" />
</h1>
<h:outputText value="#{msg['configuration1.main.msg']}" />
<h:panelGroup layout="block" id="addSpaceImgContainer" styleClass="addSpaceImgContainer">
<h:form>
<h:inputHidden value="#{pictureProvider.idRequest}" />
</h:form>
<h:form id="uploadForm" rendered="#{pictureProvider.flagPicture}" enctype="multipart/form-data" prependId="false">
<p:fileUpload allowTypes="/(\.|\/)(jpe?g)$/" cancelLabel="#{msg['upload.cancel.msg']}" dragDropSupport="true" fileLimit="1"
fileLimitMessage="#{msg['upload.filelimit.msg']}" fileUploadListener="#{pictureProvider.handFile}"
invalidFileMessage="#{msg['upload.invalidfile.msg']}" invalidSizeMessage="#{msg['upload.invalidsize.msg']}"
label="#{msg['upload.label.msg']}" sizeLimit="5242880" mode="advanced" uploadLabel="#{msg['upload.upload.msg']}"
update="@all" />
<h:panelGroup layout="block" id="previewPictureContainer" rendered="#{selectedSpace.img or pictureProvider.flagPreviewPicture}" styleClass="previewPictureContainer">
<h:outputText value="#{msg['configuration1.preview.msg']}" />
<p:graphicImage cache="false" value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/images/#{selectedSpace.idSpace}/coverPicture.jpeg" />
<h:commandButton action="recrop" value="#{msg['reuse.btn']}" alt="#{msg['reuse.btn.alt']}" title="#{msg['reuse.btn.title']}" accesskey="4" />
</h:panelGroup>
</h:form>
</h:panelGroup>
<h:panelGroup layout="block" id="cropperSpaceImgContainer" styleClass="cropperSpaceImgContainer">
<h:form id="cropperForm" rendered="#{pictureProvider.flagCropper}" prependId="false">
<h:panelGroup layout="block" id="preRenderSpaceImgContainer" styleClass="preRenderSpaceImgContainer">
<p:imageCropper immediate="true" initialCoords="225,75,300,75" widgetVar="casas" value="#{pictureProvider.croppedImage}" image="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/images/#{selectedSpace.idSpace}/coverPicture.jpeg" alt="#{msg['cropper.picture.msg']}" />
</h:panelGroup>
<h:panelGroup layout="block" id="croppedButtonsContainer" styleClass="croppedButtonsContainer">
<p:commandButton update="@all" value="#{msg['crop.btn']}" action="#{pictureProvider.crop}" icon="ui-icon-scissors"/>
</h:panelGroup>
</h:form>
</h:panelGroup>
<h:panelGroup layout="block" id="saveCropImgContainer" styleClass="saveCropImgContainer">
<h:form id="controlForm" rendered="#{pictureProvider.flagSave}" prependId="false">
<h:panelGroup layout="block" id="renderSpaceImgContainer" styleClass="renderSpaceImgContainer">
<p:graphicImage cache="false" value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/images/#{selectedSpace.idSpace}/tempCrop.jpeg" />
</h:panelGroup>
<h:panelGroup layout="block" id="saveCropButtonsContainer" styleClass="saveCropButtonsContainer">
<p:commandButton update="@all" value="#{msg['crop.btn']}" action="recrop" alt="#{msg['crop.btn.alt']}" title="#{msg['crop.btn.title']}" icon="ui-icon-scissors"/>
<p:commandButton update="@all" value="#{msg['save.crop.btn']}" action="#{pictureProvider.save(flowRequestContext)}" alt="#{msg['save.crop.btn.alt']}" title="#{msg['save.crop.btn.title']}" />
<p:commandButton update="@all" value="#{msg['reupload.btn']}" action="reupload" alt="#{msg['reupload.btn.alt']}" title="#{msg['reupload.btn.title']}" />
</h:panelGroup>
</h:form>
</h:panelGroup>
<h:panelGroup layout="block" id="omit1StepContainer" styleClass="omit1StepContainer">
<h:form prependId="false">
<p:commandButton value="#{msg['omit.btn']}" action="omitPicture" alt="#{msg['omit.btn.alt']}" title="#{msg['omit.btn.title']}" accesskey="10" />
</h:form>
</h:panelGroup>
</h:panelGroup>
Bean代码
@Component("pictureProvider")
@Scope("view")
public class PictureProvider implements Serializable {
@Autowired
private ServletContext sc;
@Autowired
private ISpaceBO spaceBo;
public void handFile(FileUploadEvent event){
logger.entry("PictureProvider.handFile()");
String pathMultimedia=sc.getInitParameter("multimediaPath");
RequestContext requestContext=RequestContextHolder.getRequestContext();
Space space=(Space)requestContext.getFlowScope().get("selectedSpace");
RequestControlContext rec = (RequestControlContext) requestContext;
//Create multimedia folder
File f=new File(pathMultimedia + File.separator + space.getIdSpace());
if(f.exists()){
logger.debug("Multimedia folder already exist");
try{
savePicture(event,f,this.getIdRequest(),space.getIdSpace());
}catch (FacesException e){
//return "error";
}
}else{
//0777 permissions
f.setReadable(true, false);
f.setWritable(true, false);
f.setExecutable(true,false);
if(f.mkdir()){
logger.debug("Multimedia folder was created");
try{
savePicture(event,f,this.getIdRequest(),space.getIdSpace());
}catch (FacesException e){
//Arreglar
//return "error";
}
}else{
//Arreglar
//return "error";
}
}
//Redirecting to transition, it's necessary to reload cropper
//rec.handleEvent(new Event(this,"yes"));
event=null;
}
public void savePicture(FileUploadEvent upload,File file,String idRequest,Integer idSpace){
logger.entry("PictureProvider.savePicture()");
InputStream data;
byte[] bytes=null;
try {
data = upload.getFile().getInputstream();
bytes=IOUtils.toByteArray(data);
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
String extension=upload.getFile().getContentType().replace("image/","");
extension="." + extension;
FileImageOutputStream imageOutput=null;
String namePic=null;
try{
switch (idRequest) {
case "event":
String nameEventFolder="E"
+ spaceBo.getDao().countSectionPages(idSpace,4);
File f=new File(file.getAbsolutePath() +
File.separator + "events" + File.separator + nameEventFolder);
if(f.exists()){
int totalFiles=f.listFiles().length;
namePic="pic_" + totalFiles + extension;
imageOutput=new FileImageOutputStream(new File(f.getAbsolutePath()
+ File.separator + namePic));
}else{
f.setExecutable(true,false);
f.setWritable(true, false);
f.setReadable(true, false);
if(f.mkdirs()){
int totalFiles=f.listFiles().length;
namePic="pic_" + totalFiles + extension;
imageOutput=new FileImageOutputStream(new File(f.getAbsolutePath()
+ File.separator + namePic));
}
}
RequestContext requestContext=RequestContextHolder.getRequestContext();
EventProvider eventProviderBean=(EventProvider) requestContext.getActiveFlow()
.getApplicationContext().getBean("eventProvider");
//eventProviderBean.setTempFolderName(nameEventFolder);
eventProviderBean.getTempPicNames().add(namePic.substring(0, namePic.indexOf(".")));
//MARCAR ERRORES si no es un DIRECTORIO
break;
case "configuration":
imageOutput=new FileImageOutputStream(new File(file.getAbsolutePath() +
File.separator + "coverPicture" + extension));
default:
break;
}
if(imageOutput!=null){
imageOutput.write(bytes,0,bytes.length);
imageOutput.close();
this.setFlagPicture(false);
this.setFlagCropper(true);
this.setFlagPreviewPicture(true);
}
}catch(Exception e) {
throw new FacesException("Error writing multimedia data");
}
}
public void crop(){
logger.entry("PictureProvider.crop()");
if(getCroppedImage()==null){
return;
}
String filename=getCroppedImage().getOriginalFilename();
String multimediaPath=sc.getInitParameter("multimediaPath");
int idSpace=((Space)RequestContextHolder.getRequestContext().getFlowScope().get("selectedSpace")).getIdSpace();
FileImageOutputStream imageOutput=null;
File file=null;
try{
switch (this.getIdRequest()) {
case "event":
file=new File(multimediaPath + File.separator + idSpace + File.separator + "events" + File.separator
+ spaceBo.getDao().countSectionPages(idSpace,4));
if(file.isDirectory()){
int totalFiles=file.listFiles().length;
imageOutput=new FileImageOutputStream(new File(file.getAbsolutePath()
+ "temp_pic_" + totalFiles + ".jpg"));
}
//MARCAR ERRORES si no es un DIRECTORIO
break;
case "configuration":
file=new File(multimediaPath + File.separator + idSpace + File.separator + "tempCrop.jpeg");
imageOutput=new FileImageOutputStream(file);
break;
default:
break;
}
if(imageOutput!=null){
imageOutput.write(croppedImage.getBytes(),0,croppedImage.getBytes().length);
imageOutput.close();
this.setFlagCropper(false);
this.setFlagSave(true);
}
RequestContext requestContext=RequestContextHolder.getRequestContext();
RequestControlContext rec = (RequestControlContext) requestContext;
//rec.handleEvent(new Event(this,"yes"));
}catch (Exception e){
e.printStackTrace();
//ARREGLAR
}
}
}
答案 0 :(得分：0)
我在另一个stackoverflow post中找到了解决方案，现在当我使用ajax重新上载这些解决方案时，每个浏览器都显示正确的图片。这是@BalusC的答案：
告诉浏览器不要缓存图像。在将第一个位写入其正文之前，在servlet响应上设置以下标题：
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.
为了防止硬鼻子浏览器仍然缓存它，请添加一个带有时间戳的请求参数到servlet URL。
<h:graphicImage value="imageServlet?id=#{bean.imageId}&t=#{now.time}" />
#{now}在faces-config.xml中注册的位置如下：
<managed-bean>
<managed-bean-name>now</managed-bean-name>
<managed-bean-class>java.util.Date</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>