如何在同一页面上设置多个 FilePond 文件输入元素？

Question

每当我尝试在同一网页上创建多个 Filepond 输入时，只有第一个输入会被设置样式并完美地工作，就像 FilePond 网站上的示例一样，其他输入则不起作用。请帮助，因为我已经尽力但仍然没有得到它。 我的意思的屏幕截图

Answer 1

看起来屏幕截图中的字段尚未初始化，您需要将要转换为 FilePond 实例的每个字段作为目标。

请参阅此处的单个实例的示例代码。 https://pqina.nl/filepond/docs/patterns/api/filepond-object/#creating-a-filepond-instance

对于多个实例，它应该类似于：

<input type="file" class="filepond">
<input type="file" class="filepond">
<input type="file" class="filepond">

<script>
// get a collection of elements with class filepond
const inputElements = document.querySelectorAll('input.filepond');

// loop over input elements
Array.from(inputElements).forEach(inputElement => {

  // create a FilePond instance at the input element location
  FilePond.create(inputElement);

})
</script>