p:fileUpload触发fileUploadListener事件后图片淡隐消失问题
问题根因
p:fileUpload高级(advanced)模式下上传完成后文件条目自动淡隐消失,是两处配置错误共同触发的:
- 默认行为不匹配:开启
auto="true"自动上传时,PrimeFaces默认会在单个文件上传成功后,自动触发对应文件条目的淡出移除动画,这个逻辑是为单文件即时上传场景设计的,和当前多文件上传后统一点击「Enviar arquivo」提交的需求冲突。 - AJAX更新逻辑异常:form上配置的
prependId="false"会破坏JSF客户端组件ID的命名规则,同时fileUpload设置的update="panel2"目标是嵌套在h:commandLink内部的输出文本,两者组合会导致PrimeFaces部分更新时DOM定位偏差,误触发fileUpload组件内置的列表清除逻辑,未点击最终提交按钮就提前清掉已上传的文件条目。
修复步骤
按以下顺序调整代码即可解决问题:
- 移除h:form标签上的
prependId="false"属性,该属性会持续引发各类PrimeFaces AJAX交互异常,非必要不要使用。 - 调整p:fileUpload标签属性,增加回调阻止默认的条目清除行为,同时修正更新目标:
<p:fileUpload fileUploadListener="#{tombamentoFace.handleFileUploadArquivo}" mode="advanced" dragDropSupport="false" multiple="true" fileLimit="10" fileLimitMessage="É permitido o envio de 10 arquivos por requisição" invalidFileMessage="Arquivo inválido!" label="Incluir Arquvio" invalidSizeMessage="Arquivo maior que 5mb não é permitido!" sizeLimit="5000000" update="arquivoNomePanel" auto="true" oncomplete="return false;" />
- 调整文件名显示区域的结构,把更新目标从嵌套的子元素改成独立外层容器,避免更新时破坏交互组件结构:
<div class="col-md-4" id="arquivoNomePanel"> <h:commandLink actionListener="#{tombamentoFace.downloadAnexoArquivo(selectedArquivo)}" > <h:outputText value="#{tombamentoFace.selectedArquivo.nome}" style="font-weight: bold; margin-top: 10px; " class="pull-left"/> </h:commandLink> </div>
- 同步修改Cancelar按钮的update属性,将原有
update="panel2"替换为update="arquivoNomePanel",匹配新的容器ID。
校验点
如果调整后仍存在文件消失问题,检查后端handleFileUploadArquivo监听器逻辑,确认方法内没有手动清空存储已上传文件的集合,保证已上传文件对象会保留到用户点击最终提交按钮的环节。
内容的提问来源于stack exchange,提问作者Diego Alves
相关产品推荐
相关产品推荐

