使用Filepond拖拽上传文件时获取文件数量失败的问题求助

问题背景 #

使用Filepond实现图片上传功能时，通过文件选择框选文件能正常触发change事件获取文件数量，但拖拽上传时该事件不生效。尝试添加drop事件监听后，控制台抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'length')。

原代码如下：

HTML #

<input type="file" name="imageUpload" id="imageUpload" maxFiles="24" multiple data-allow-reorder="true" data-max-file-size="15MB" allowImageResize accept="image/png, image/jpeg, image/gif, image/webp, image/svg"/>

初始JS（仅支持文件选择） #

$(document).ready(function() {
    $('input[type=file]').on('change', function () {
        fileCount = this.files.length;
        var firstLength = 100 / fileCount;
        alert(firstLength);
    });
});

尝试的错误代码 #

$("#imageUpload").on('change drop', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var files = $(this)[0].files;
    alert(files.length);
});

错误原因 #

Filepond是封装后的上传组件，拖拽上传逻辑由组件内部处理，不会更新原生<input>的files属性，因此直接读取$(this)[0].files会得到undefined，导致报错。原生drop事件不适用于Filepond的拖拽流程，组件有自己的事件体系。

解决方案 #

使用Filepond官方提供的事件监听文件列表变化，而非原生事件。推荐使用updatefiles事件，它会在文件添加、移除、排序等任何列表变化时触发，覆盖所有场景。

正确实现代码 #

方式1：直接操作Filepond实例

$(document).ready(function() {
    // 初始化Filepond实例
    const filePondInstance = FilePond.create(document.getElementById('imageUpload'));

    // 监听文件列表更新事件
    filePondInstance.on('updatefiles', function(files) {
        const fileCount = files.length;
        if (fileCount > 0) {
            const firstLength = 100 / fileCount;
            alert(firstLength);
        }
    });
});

方式2：jQuery事件委托监听自定义事件

$(document).ready(function() {
    // 初始化Filepond
    FilePond.create($('#imageUpload')[0]);

    // 监听Filepond的自定义更新事件
    $('#imageUpload').on('FilePond:updatefiles', function(e) {
        const fileCount = e.detail.files.length;
        if (fileCount > 0) {
            const firstLength = 100 / fileCount;
            alert(firstLength);
        }
    });
});

注意事项 #

• 确保已正确引入Filepond的CSS和JS文件
• 避免使用原生change/drop事件处理Filepond的文件操作，组件内部会接管这些原生事件，无法正确获取文件状态
• updatefiles事件能覆盖所有文件列表变化场景，比单独监听addfile或removefile更高效

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