filepond Jquery获取被拖放的文件名

Question

我正在使用jquery filepond image uploader插件，它将文件上传变成拖放区。

                        <input  type="file" class="filepond" id="filepond"  
 name="filepond"/>

下面是初始化文件池的脚本

<script>
    $(function(){

        // First register any plugins
        $.fn.filepond.registerPlugin(FilePondPluginImagePreview);

        // Turn input element into a pond
      $('.filepond').filepond();


        // Listen for addfile event
        $('.filepond').on('FilePond:addfile', function(e) {
            console.log('file added event', e);


        });


    });
    </script>

我计划在不使用ajax的情况下提交一个表单，它是一个dircect表单提交。

我只是想知道如何获取被拖放的文件名，以便将文件名值分配给另一个隐藏输入，这样我就可以通过form submit直接提交整个表单。

当文件被丢弃时，我已经将事件记录在console.log（“文件添加事件”，e)；.

请帮我获取文件池中的文件名。

Answer 1

根据文档，您可以使用FilePond instace事件FilePond：addFile来了解文件何时被拖放。

在事件内部，您可以获得文件，然后您只需要使用filename属性获得名称。

下面是一个使用普通JavaScript的示例：

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);    
const pondBox = document.querySelector('.filepond--root');
pondBox.addEventListener('FilePond:addfile', e => {
        console.log('file added event', e.detail);
        var fileName = pond.getFile().filename;
    });