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

2023-12-04

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


看起来屏幕截图中的字段尚未初始化,您需要将要转换为 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在同一页面上设置多个 FilePond 文件输入元素? 的相关文章

  • Yii2:使用 Kartik Depdrop Widget?

    好的 我正在尝试使用 Kartik Depdrop 小部件 我得到的只是一个白色下拉列表 该列表中的值未显示在相关下拉列表中 我有一个州模型和一个城市模型 我的设置是这样的 在 form php中 catList ArrayHelper m
  • 亚马逊产品广告 api - 商品查找请求工作示例

    有人有亚马逊的工作示例吗ITEMLOOKUP gt 我有以下代码 但它似乎不起作用 string ISBN 0393326381 string ASIN if string IsNullOrEmpty ISBN string IsNullO
  • MVVM light:将对象从视图传递到视图模型

    我最近开始使用 MVVM light 来处理 WPF 并且有以下情况 简单场景 主窗口包含一个元素列表框 当选择一个并单击按钮时 我会触发一个命令 ReservoirViewerCommand Execute null 在 viewmode
  • 仅使用日期选择器过滤 jqGrid 日期时间列

    我目前遇到一个问题 网格中的日期时间列的格式设置为仅显示字段的日期部分 因此 原始数据看起来像 2015 04 15T15 31 49 357 网格列看起来像 4 15 2015 我正在使用日期选择器来支持列过滤 并且希望能够使用 eq 运
  • 如何添加 Objective-C 桥接头条目?

    我有一个 Swift 项目 并添加了一个用 Objective C 编写的 cocoapod 它有头文件和实现文件 据我了解 要使用 导入这些文件到我的 Swift 文件中 我需要添加一个桥接文件 我发现这个网站描述了如何手动执行此操作 因
  • ASP.NET Core 6 应用程序部件项目必须引用哪些 Nuget 包

    我正在创建一个 ASP NET Core 6 应用程序 我想在其中集成单独程序集提供的其他区域 我按照以下位置的文档进行操作https learn microsoft com en us aspnet core mvc advanced a
  • 具有取消能力的长时间运行操作模式

    为了执行长时间运行 让它在这个上下文中搜索 操作 我将加载逻辑放在TPL任务中 所以一般方法Search 在后台线程上调用 Search 操作可能足够长 所以我需要能够正确取消它 使用取消令牌 但是Search 操作直到完成才返回 所以我必
  • 使用 rmarkdown 生成的 Beamer 演示文稿中的列内容垂直居中对齐

    如何在 rmarkdown beamer presentation 中垂直居中对齐多列的内容 正如回答中评论中所建议的那样这个帖子 我试过 column width 30 但这对我不起作用 如果有一种简单的方法来对齐内容每列都不同 这也会非
  • Google 地图 Mouseout 仅适用于最后一个信息窗口

    你好 我有一个随机问题 我一直无法弄清楚 我有一张带有标记的地图 当您将鼠标悬停在其上时 这些标记会显示信息窗口 当您将鼠标移开时 这些信息窗口应该会关闭 由于某种原因 第二部分 鼠标移开时关闭信息窗口 仅应用于最后一个标记 如果有人可以向
  • 有什么方法可以动态设置 WP7 Webbrowser 控件高度并锁定滚动吗?

    我需要在 WebBrowser 控件中显示 html 字符串 但它的长度可以是可变的 并且不是屏幕上唯一的内容 因此 我需要能够设置与消息的实际内容相对应的宽度 WebBrowser 具有 ActualHeight 属性 但不会产生任何结果
  • 我可以在 Delphi IDE 中禁用 Insert 键吗?

    Something I find really annoying is putting the Delphi editor into type over mode by pressing the Insert key is there a
  • java中的接口、类和构造函数

    关于接口和类 有些事情让我困扰 我正在尝试通过名为 IPAddressString 的类来实现名为 IPAddress 的接口 Ipadress 包含四个部分 我正在编写一种名为 mask 的方法 该方法用给定地址屏蔽当前地址 掩蔽 运算是
  • 使用 Django ORM 作为独立的[重复]

    这个问题在这里已经有答案了 可能的重复 只使用 Django 的某些部分 仅使用 Django 的 DB 部分 我想独立使用 Django ORM 尽管在谷歌上搜索了一个小时 我仍然有几个问题 是否需要我使用setting py myApp
  • R Markdown Shiny renderPlot 来自 lapply 的绘图列表

    我正在开发 R Markdown Shiny 文档来 对数据框进行子集化以包含 日期 列和一些数字数据列 设置闪亮的用户输入的方式是 选择要包含的数据列的单选按钮 然后单击 子集数据 按钮来创建d 没问题 生成绘图列表 plotList 每
  • 字符串插值的变量返回非单位值

    这是我第一次使用 LESS 构建网站 并遇到了以下代码最能描述的问题 section row padding size xs 30px section row padding size sm 50px section row padding
  • asp.net mvc 2应用程序中的IoC和dataContext配置

    我有Global asax就像下面的代码 public class MvcApplication System Web HttpApplication public static void RegisterRoutes RouteColle

随机推荐