PrimeFaces文件上传组件onAdd监听器无法触发问题

我来帮你排查下问题所在，你的代码里主要有两个小细节没处理好，导致alert弹窗没正常工作：

问题分析 #

• onAdd事件调用方式错误：你直接写了onAdd="displayEachFile"，但PrimeFaces触发onAdd事件时会传递一个event对象作为参数，这种写法没有把参数正确传给你的函数，导致函数拿不到文件信息。
• 函数参数定义不匹配：你定义的displayEachFile(file,callback)期望第一个参数是file，但实际PrimeFaces传递的是event对象，两者不匹配——就算函数能执行，alert的内容也不是你想要的文件信息（会显示[object Event]）。

修正后的代码 #

第一步：调整JavaScript函数 #

修改函数逻辑，通过event参数获取添加的文件列表，并且弹出可读性更高的文件名（直接alert文件对象会显示[object File]，不太直观）：

<h:head>
    <script type="text/javascript">
        function displayEachFile(event) {
            // 遍历所有添加的文件（因为你设置了multiple="true"）
            event.files.forEach(function(file) {
                alert("添加的文件：" + file.name);
            });
        }
    </script>
</h:head>

第二步：修正p:fileUpload的onAdd属性 #

显式调用函数并传入event参数：

<p:fileUpload value="#{fileBean.files}" mode="advanced" multiple="true" auto="true"
              listener="#{fileBean.handleFileUpload}" widgetVar="hello"
              onAdd="displayEachFile(event)"/>

调整后，每次添加文件时，就会逐个弹出对应的文件名了。如果你确实需要直接alert文件对象本身，把file.name改成file即可，但显示内容会是[object File]，通常我们更倾向于展示文件名、大小这类可读信息。

内容的提问来源于stack exchange，提问作者user3309305