在Javascript中重置FilePond输入
在Javascript中重置FilePond输入
提问于 2019-06-02 00:45:47
我已经在我的页面上实现了Filepond上传。当用户选择一个文件时，我将该文件设置在html画布上进行编辑。但是，当用户想要上传另一个文件时，filepond input会保留上次上传的文件。
在FilePond:addfile事件中成功地在画布上设置文件之后，我尝试了FilePond.destroy(inputElement);。
$('.upload-file').filepond();
$.fn.filepond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImageResize,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageTransform,
FilePondPluginImageCrop,
FilePondPluginImageValidateSize,
);
FilePond.setOptions({
labelIdle: 'Drag & Drop your file or <span class="filepond--label-
action"> Browse </span>',
maxFiles: 1,
allowDrop: true,
allowMultiple: false,
dropOnPage: true, //for page to work, element has to be false https://github.com/pqina/filepond/issues/113
dropOnElement: false,
labelTapToCancel: '', //we dont want to allow cancel
labelTapToUndo: '',
maxFileSize: intFileSizeInMB,
allowReplace: true,
allowRevert: false,
instantUpload: false
});
const pond = document.querySelector('.filepond--root');
pond.addEventListener('FilePond:addfile', e => {
console.log('File added', e.detail);
if (e.detail) {
if (e.detail.file && e.detail.file.file.name) {
SetFileOnCanvas(e.detail.file.file, e.detail.file.file.name);
const inputElement = document.querySelector('input[type="file"]');
FilePond.destroy(inputElement);
}
}
});
pond.addEventListener('FilePond:processfile', e => {
console.log('Process File COMPLETE', e.detail);
});上传文件并将其设置为Canvas后，文件上传输入应被清除，并为下一次上传做好准备。
回答 3
Stack Overflow用户
发布于 2020-01-10 00:00:15
工作解决方案
var pond_ids = [];
if (pond.getFiles().length != 0) { // "pond" is an object, created by FilePond.create
pond.getFiles().forEach(function(file) {
pond_ids.push(file.id);
});
}
pond.removeFiles(pond_ids);Stack Overflow用户
发布于 2019-06-25 01:58:04
上传文件后“完成功能”
你可以这样做(简单的例子)：
if (filePond.getFiles().length != 0) {
for (var i = 0; i <= filePond.getFiles().length - 1; i++) {
filePond.removeFile(filePond.getFiles()[0].id)
}
}Stack Overflow用户
发布于 2021-10-23 09:12:04
我知道太晚了，但你可以用
let filePond = FilePond.find(document.getElementById(filePondElementId));
if (filePond != null) {
//this will remove all files
filePond.removeFiles();
}<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56408615
复制相关文章
相似问题
腾讯云开发者
