如何使用 <h:inputFile> 对完成的上传做出反应？答案

【问题标题】：How can I react to a finished upload with <h:inputFile>?如何使用 <h:inputFile> 对完成的上传做出反应？
【发布时间】：2014-01-27 09:17:03
【问题描述】：

我在这里在 Wildfly-8.0.0.CR1 上使用 Richfaces-4.3.5，从不适用于 JSF-2.2/Servlet-3.0 的 <rich:fileUpload> 迁移。我用这个 sn-p 替换它：

<rich:popupPanel id="testPop" autosized="true">
    <h:form id="uploadF" enctype="multipart/form-data">
       <h:inputFile value="#{bean.file}">
           <a4j:ajax listener="#{bean.storeFile()}" render="@form,:fileListTbl"
               oncomplete="#{rich:component('testPop')}.hide();" />
       </h:inputFile>
    </h:form>
</rich:popupPanel>

这很好用，因为调用了storeFile 方法，我可以很好地访问bean.file。但是，我想在完成上传后关闭rich:popupPanel，所以我需要对ajax 请求的成功/完成事件做出反应。但这似乎不太可能 - 弹出窗口保持可见并且响应显然不完整（为了更好的可读性而缩进）：

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
  <changes>
    <update id="j_id1:javax.faces.ViewState:0">
      <[CDATA[-1186354868983349335:-5499969782208038164]]>
    </update>
    <extension id="org.richfaces.extension"><render>@component</render></extension>
  </changes>
</partial-response>

虽然richfaces 调试消息表明处理程序正在被调用：

RichFaces: Received 'success' event from <input id=uploadF:j_idt1136 ...>
RichFaces: Received 'complete' event from <input id=uploadF:j_idt1136 ...>

那么，一个简单的问题：如何关闭弹出窗口并重新渲染组件？

【问题讨论】：

标签： file-upload richfaces ajax4jsf jsf-2.2 wildfly

【解决方案1】：

我不确定问题是否与a4j:ajax 直接相关，或者需要做什么才能使其与a4j:ajax 一起使用，但下面的代码似乎与f:ajax 一起使用。

<h:form id="formId">
    <h:commandLink value="popup"
        onclick="#{rich:component('testPop')}.show(); return false;" />
</h:form>

<rich:popupPanel id="testPop" autosized="true">
    <h:form id="uploadF" enctype="multipart/form-data">
        <h:inputFile value="#{bean.file}">
            <f:ajax listener="#{bean.storeFile()}" render="@form :fileListTbl"
                onevent="eventHandler"/>
        </h:inputFile>
    </h:form>
</rich:popupPanel>

<script>
    function eventHandler(event)
    {
        if (event.status == 'success')
        {
            #{rich:component('testPop')}.hide();
        }
    }
</script>

【讨论】：