0

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

                        <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 的情况下提交的表单，它是一个直接的表单提交。

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

一旦文件被删除，我已经控制台记录了事件 console.log('file added event', e); .

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

4

1 回答 1

4

根据文档，您可以使用FilePond 实例事件 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;
    });
于 2020-07-17T21:29:38.433 回答