如何在 Primefaces 文件上传的 onchange 上捕获错误/验证错误答案

【问题标题】：How to catch error/validation error on onchange for Primefaces fileupload如何在 Primefaces 文件上传的 onchange 上捕获错误/验证错误
【发布时间】：2017-12-30 22:38:43
【问题描述】：

我正在使用passthrough 将onchange 传递给PF 文件上传组件。当用户选择一个文件时，我想折叠一个面板并展开另一个面板。

我的问题是我总是折叠和展开面板。如果发生错误，我不想这样做。并且错误地，我的意思是如果我添加了不受支持的文件类型。如果这样做，将显示 PF 错误消息，但也会调用 onchange 中的内容。

我尝试使用args，但这不适用于passthrough...

如何检查这些特定错误，如果没有，则只执行onchange 中的内容？或者我能以某种方式抓住它们吗？

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if (tagName == 'INPUT' &amp;&amp; #{!cc.attrs.isLogo}) { if (!!value) {PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand();} }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

更新：

我什至试图通过类名（如console.log($(PrimeFaces.escapeClientId('#{cc.clientId}:addPanel')).find('.ui-messages-error-summary'));）获取存储消息的 DOM 元素

这也没有成功，使用onchange方法时没有找到任何东西，但后来通过在浏览器控制台中手动运行上述语句找到了。似乎onchange 在 PF 修改标记之前被执行。或者至少不是所有的标记......

有什么建议吗？

【问题讨论】：

标签： jsf file-upload primefaces jsf-2

【解决方案1】：

所以，我正在回答我自己的问题。工作代码如下所示：

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    widgetVar="#{clientId}_documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

基本上我改变的是passthrough 行，现在看起来像这样：

pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }"

它基本上只过滤掉具有 id 的 DIV 元素，因为我看到文件只附加到 DOM 中的一个元素，并且通过使用 widgetvar 和条件 if(!!PF('#{clientId}_documentUpload').files.length) 它基本上可以工作.

我不知道这是否是最好的或正确的方法，但正如我所说，它可以完成工作。

【讨论】：