如何添加监听器到p:fileUpload中的Choose按钮

Question

是否可以为 FileUpload 组件中的“选择”按钮添加监听器？

我在高级模式下使用p:fileUpload。

我浏览了文档，它只支持点击“上传”按钮后触发的fileUploadListener。（也尝试过actionListener，validationListener）

PrimeFaces 版本为 5.3。

p:fileUpload 的定义:

<p:fileUpload
                            fileUploadListener="#{ipchYonetimiController.handleFileUpload}" 
                            widgetVar="aras"
                            mode="advanced" dragDropSupport="false" update="@this toplumsgs"
                            sizeLimit="100000" fileLimit="1" 
                            cancelLabel="İptal et" allowTypes="/(\.|\/)(xlsx)$/"
                            invalidSizeMessage="Dosya boyutu çok büyük"
                            invalidFileMessage="Dosya formatı xlsx olmalı"
                            fileLimitMessage="Sadece bir dosya yükleyebilirsiniz" />

这是我需要它的图片：

我基本上想在用户单击选择按钮时清除验证错误。由于选择按钮包含在 fileUpload 组件中，因此无法为其分配侦听器。

尝试调整此链接中的代码并向按钮添加侦听器，但没有成功：

 PF('aras').chooseButton.addEventListener(...)

如何禁用 PrimeFaces FileUpload 中的“选择”按钮直至上传完成

Answer 1

你能试试这个吗 - 它对我有用：

<p:fileUpload id="fileupload" ..... />

<script>
    $(document).on("click", ".ui-fileupload input[type=file]", function(event){
        $(this).closest('.ui-fileupload').find('.ui-icon-close').trigger('click');
    });
</script>

Answer 2

您可以设置验证消息的超时时间，而不是使用文件上传组件。请参阅：显示消息后如何隐藏

第二个选项是使用咆哮来显示错误消息。

编辑： 当用户单击上传按钮时，会触发 onstart 事件，以便您可以使用它。

<p:fileUpload onstart="PF('validationMsg').hide()" />

Answer 3

要捕获第一个文件选择器，请尝试以下操作：

$(document).on("input", "[id*='idwithwildcard']", function(event){
                           console.log('input achieved');                          
                        });