在FilePond获取后设置隐藏输入字段值
，可以通过以下步骤实现：
- 首先，确保你已经引入了FilePond库，并在页面中创建了一个FilePond实例。
- 在FilePond实例的配置对象中，使用
onaddfile事件监听文件添加完成的事件。 - 在
onaddfile事件的回调函数中，可以获取到添加的文件对象。你可以通过file.getFileEncodeDataURL()方法获取文件的Base64编码数据URL。 - 将获取到的文件数据URL赋值给隐藏输入字段的值。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>FilePond设置隐藏输入字段值示例</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
</head>
<body>
<input type="file" id="fileInput" multiple>
<input type="hidden" id="hiddenInput">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// 创建FilePond实例
const inputElement = document.getElementById('fileInput');
const hiddenInputElement = document.getElementById('hiddenInput');
const pond = FilePond.create(inputElement);
// 监听文件添加完成事件
pond.on('addfile', (error, file) => {
if (error) {
console.log('文件添加失败', error);
return;
}
// 获取文件的Base64编码数据URL
file.getFileEncodeDataURL((dataURL) => {
// 将数据URL赋值给隐藏输入字段的值
hiddenInputElement.value = dataURL;
});
});
</script>
</body>
</html>在上述示例中，我们创建了一个包含文件选择输入框和隐藏输入字段的HTML页面。通过FilePond库创建了一个FilePond实例，并监听了文件添加完成的事件。在事件回调函数中，我们获取到了添加的文件对象，并通过getFileEncodeDataURL()方法获取文件的Base64编码数据URL。最后，将数据URL赋值给隐藏输入字段的值。
这样，当用户选择文件后，FilePond会自动将文件的Base64编码数据URL设置为隐藏输入字段的值，你可以在后续的表单提交或其他操作中使用隐藏输入字段的值。
相关·内容
我正在使用FilePond的fetch路径上传文件。从web拖放图像后，文件URL成功发送到服务器。我可以按照文档中提到的方式处理和返回响应头。$uniqueId . '"',]);
上传成功后，filepond会生成隐藏的输入字段，并将图片URL作为值。<fieldset class="f
浏览 22提问于2021-05-26得票数 0
，我从我的JSON服务器得到了响应， {"success":true,"filename":"image1.png","assetId":946} 但在使用> docs时，它不会使用assetId填充隐藏字段onload: (response) => response.assetId 如果我删除onload，那么默认功能将返回纯文本，然后我的隐藏输入将在值中显示整个JSON响应，如下所示 <input typ
浏览 12提问于2020-07-02得票数 0
回答已采纳
1回答
在隐藏输入中接收未定义的值Date: Mon, 25 May 2020 11:01:01 GMT
响应生成正确，但在文件中隐藏接收未定义<input type="hidden" n
浏览 4提问于2020-05-27得票数 0
回答已采纳
我使用的是jquery filepond图片上传插件，它可以将文件上传转换为拖放区。<input type="file" class="filepond" id="filepond" 以下是初始化文件池的脚本 $(function);
浏览 2提问于2019-07-23得票数 0
1回答
虽然这个库似乎维持在68星，太多的风险，我更喜欢没有它。我尝试过的如果没有该id，则在提交表单时，self.request.FILES将是空字典。
浏览 5提问于2021-11-28得票数 0
我在读Filepond的文档 @Html.HiddenFor(m => m.ReturnUrl) class="filepond" multiple
data-max-file-siz
浏览 3提问于2019-09-18得票数 3
2回答
我正在构建一个传统的服务器呈现的HTML应用程序(在PHP之上使用 )，它允许用户创建想法。他们访问一个创建想法表单，填写一些问题，然后单击submit。当然，传统的方法是将文件输入添加到表单中，然后立即提交所有内容(数据和文件)。服务器可以创建一个ID，然后将文件与ID关联起来。更现代的实现似乎是在文件被添加后立即上传(例如，通过拖放)。例如，我已经确定是领先的，否则我可能会使用。
但是，如果浏览器在用户提交表单之前发送文件，我如何才能最好地将文件与表单数据关联起来？保存它(作为一个隐藏字段</
浏览 0提问于2018-05-29得票数 1
回答已采纳
2回答
我在React项目中有一个submit表单，在这里我使用filepond API，这样用户就可以向表单提交文件 allowMultiple={true}<File key={file} src={file} origin="local"
/&g
浏览 0提问于2019-01-25得票数 4
回答已采纳
正在尝试从图像上传中获取base64并将其发送到服务器。使用其他值，我可以获得隐藏输入的值。Api被配置为一次获取2个文件，因此我无法在此时单独处理上传 在从上传图像的值映射“数据”时遇到问题，我尝试了一些简单的映射方法，但仍然失败。/config';
impo
浏览 25提问于2019-03-21得票数 1
3回答
我已经在我的页面上实现了Filepond上传。当用户选择一个文件时，我将该文件设置在html画布上进行编辑。但是，当用户想要上传另一个文件时，filepond input会保留上次上传的文件。在FilePond:addfile事件中成功地在画布上设置文件之后，我尝试了FilePond.destroy(inputElement);。$('.upload-file').filepond</em
浏览 13提问于2019-06-02得票数 2
这是一个普通的输入文件，在表单中使用HTML，使用POST方法 <input type="file" name="file" accept="image/png, image/jpeg"> 然后，我将使用用PHP编写的函数来获得该文件输入 function Upload() { $error = $_FILES['
浏览 35提问于2021-07-21得票数 1
1回答
"exercise[length]" placeholder="Length" type="number"></div>$('.te-len').hide()
在上面的形式中，还有带有自动竞争的文本输入字段，它使用ajax获取
浏览 4提问于2013-08-31得票数 0
回答已采纳
1回答
使用Filepond库上传
、、、、
请在预览后，我似乎不能得到我选择的文件在预览中发送通过php的文件头，一旦我提交的表格一般… 这是html <div class="col-md-7"></div> 而me调用文件池jquery对象 $('.my-pond-multiple').f
浏览 24提问于2020-10-11得票数 0
回答已采纳
1回答
我试图用它的ImagePreview插件来设置FilePond，但是即使filepond清楚地加载了文件，还是有一些东西弄乱了，导致预览列表中只有灰色的方块。'@fortawesome/fontawesome-free/css/all.min.css';import 'filepond-plugin-image-pr
浏览 34提问于2020-10-09得票数 0
回答已采纳
我可以追踪做go.example.com/?src='ThisSite'的线索的来源。我不知道的是如何跟踪嵌入的form2，也找不到任何信息。有人知道怎么做吗？谢谢!
浏览 1提问于2014-07-22得票数 1
回答已采纳
4回答
我正在使用VB ASP.net和后端作为SQL，因为我必须从日历中选择日期，因为我使用javaScript日历作为客户端编码和其他控件，当页面回发时，我丢失了所选择的日历值，但我必须保留日期，直到单击保存按钮，这里是TextBox输入。font-size:14pt; height: 20pt; background-color: #3366FF;" 我使用过隐藏场
浏览 4提问于2014-03-24得票数 1
回答已采纳
4回答
我有一个带有像"username"这样的超文本标记语言输入字段的JSP。我有一个JavaScript方法，其中我使用`document.getElementById('userId').value获取该字段的值。现在我有了一个struts2标记：<s:hidden name="username" />
在我的JavaScript中，在提交之前，我需要将输入文本字段
浏览 0提问于2011-12-27得票数 3
在自动完成中选择条目后，将使用("#fieldName").val()方法设置两个隐藏字段的值，如下所示当表单发布时，隐藏字段的值不在模型中在自动完成字段中输入的值是。尽管当我手动在<
浏览 1提问于2015-09-27得票数 0
回答已采纳
2回答
PHP Post调用不返回变量
、、、、
我有一个隐藏的输入字段，我使用jquery填充一些任意值，这样： // Obtains the contents of a div within the current，我可以看到elem变量从所需的div中获取html，但不知道该变量是否传递给了隐藏的输入字段值。我想知道为什么隐藏输入字段的值没有被更
浏览 1提问于2013-01-07得票数 0
回答已采纳
我有一个复选框，在某些情况下，可以使用javascript禁用和选中它，即：cbTest.disabled= true;但是，在发送回发时，服务器端的CheckBoxTest.Checked为false。
浏览 2提问于2010-03-17得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
