在部分ajax提交中重新加载图形？ [复制]

Question

我的想法是上传一张图片并显示它使用 ajax 尽可能多地更新 div（包含图片）。我想这样做是因为我使用了视图范围托管 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
    }
}
}

Answer 1

我在另一个 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}&amp;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>