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

Question

每当我尝试在同一个网页上创建多个 Filepond 输入时，只有第一个输入得到样式化并且完美地作为 FilePond 网站上的示例工作，其他输入不起作用。请帮忙，因为我已经尽力了，但仍然没有得到它。 ScreenShot of what I mean

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>

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

How do I set up multiple FilePond file input elements on the same page?

filepond