JSF输入文件标签+ ajax

时间:2014-01-17 19:15:29

标签: ajax jsf file-upload jsf-2.2

我在这个问题上失去了一整天而一无所获。我知道问题已经被问到但是从未得到过回答。 BalusC说这个问题在JSF 2.2.5中得到修复,但要么它不是,要么我做错了。

我使用带有ajax的h:inputFile标签在从磁盘中选择一个后,在预览div中呈现选择的图像。但它只渲染一次,我必须重新加载页面才能看到下一个选择的图像。它会导致更多错误。例如,当我使用SUBMIT按钮将所选图像发送到DB时,不执行commandLink中的ajax(图像在刷新后保存并在页面后呈现)。

在我看来,在从磁盘上选择一个图像后,ajax被破坏了,并且没有执行ajax动作,即使它们不属于h:inputfile。

这是我的JSF表单(其中一个版本,因为我尝试了很多技巧)

<h:panelGroup class="photo-update" rendered="#{profileBean.page eq 'photo'}">
  Dodaj lub zmień swoje zdjęcie profilowe[...]
  <h:form enctype="multipart/form-data">
    <h:panelGroup id="form-content">
      <h:panelGroup id="current-image" class="current-image">
        <p:graphicImage value="#{imageBean.getUserImage()}"/>
      </h:panelGroup>
      <h:panelGroup id="accept-container-ajax">
        <h:panelGroup id="accept-container" class="accept-container" 
            rendered="true">
          <div class="arrow">
            <img src="resources/images/arrow.png"/>
            <div class="change-text">Zamień na</div>
          </div>
          <h:panelGroup id="new-image" class="new-image">
            <p:graphicImage value="#{profileBean.getConvertedImage()}"/>
          </h:panelGroup>
          <h:commandLink class="btn btn-default ok-button" value="zatwierdź" 
              action="#{profileBean.uploadPhoto}">
            <f:ajax render="accept-container-ajax current-image" 
              execute="@form"/>
          </h:commandLink>
        </h:panelGroup>
      </h:panelGroup>

      <div class="btn btn-default change-image-container">
        <a href="#">Zmień zdjęcie</a>
        <h:inputFile immediate="true" id="change-image" 
            class="change-image" value="#{profileBean.image}">
          <f:ajax render="accept-container-ajax" execute="@form"/>
        </h:inputFile>
      </div>
    </h:panelGroup>
  </h:form>
</h:panelGroup>

这是bean的片段:

public StreamedContent getConvertedImage() throws IOException {
    return userBo.convertPartToStream(image);
}
public void uploadPhoto() {
    this.renderChangeContainer = false;
    if (userBo.addImage(this)) {
        FacesContext.getCurrentInstance().addMessage(
            null, new FacesMessage(
                FacesMessage.SEVERITY_INFO, "...", null));
    } else {
        FacesContext.getCurrentInstance().addMessage(
            null, new FacesMessage(
                FacesMessage.SEVERITY_ERROR, "...", null));
    }
}

注入BO方法没问题。

请告诉我发生了什么事。

编辑: 我也看到丑陋的iframe,我想有一些回复内容。

0 个答案:

没有答案