提问者:小点点

filepond Jquery获取被拖放的文件名


我正在使用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);.

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


共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;
    });