在 Javascript 中重置 FilePond 输入答案

【问题标题】：Reset FilePond Input in Javascript在 Javascript 中重置 FilePond 输入
【发布时间】：2019-06-01 16:45:47
【问题描述】：

我已经在我的页面中实现了 Filepond 上传。当用户选择一个文件时，我将该文件设置在 html 画布上进行编辑。但是当用户想要上传另一个文件时，filepond 输入会保留上次上传的文件。

在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 后，文件上传输入应被清除并准备好再次上传。

【问题讨论】：

你不能打电话给removeFile吗？上传完成后删除项目？
我试过这样做，'pond.removeFile' 在 FilePond:addfile 事件中，但池塘对象实例在那里不可用。
$('.upload-file').filepond('removeFile'); 如果您使用 jQuery 适配器，这样的事情应该可以工作。

标签： javascript jquery file-upload filepond

【解决方案1】：

工作解决方案

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);

【讨论】：

【解决方案2】：

上传文件后“完成功能”

你可以这样做（简单的例子）：

if (filePond.getFiles().length != 0) {
    for (var i = 0; i <= filePond.getFiles().length - 1; i++) {
      filePond.removeFile(filePond.getFiles()[0].id)
    }
  }

【讨论】：

【解决方案3】：

我知道为时已晚，但你可以使用

let filePond = FilePond.find(document.getElementById(filePondElementId));
    if (filePond != null) {
    //this will remove all files
        filePond.removeFiles();
    }

&lt;script src="https://unpkg.com/filepond/dist/filepond.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案4】：

假设您通过函数create_pondProfile 创建文件池实例并且您的input 具有类filepond，则在server 块中的文件池配置中这样做：

server: {
url: '',
process: {
    url: '/path/to/upload/',
    headers: {'X-CSRF-TOKEN': csrf},
    ondata: (formData) => {
        return formData;
    },
    onload: (response) => {
        FilePond.destroy(document.querySelector('.filepond'));
        create_pondProfile('.filepond');
    }
},
...
...
}

它会销毁当前的filepond实例并在上传后创建一个新实例。

【讨论】：