Filepond：如何将 filepond 配置为在同一表单中具有 1 个以上的 filepond 字段？

Question

我想在一个表单中有 2 个不同的文件上传字段，并使用 filepond 来很好地管理图像上传。到目前为止，我可以使用文档中提供的代码在表单中的一个字段中毫无问题地使用 filepond。

我假设我可以放置多个字段并进行以下更改：

将输入从 filepond 重命名为 filepond_one 和 filepond_two
将 document.querySelector('input[type="file"]'); 调整为 querySelectorAll

代码：

<input name="filepond_one[]" id="file_one" type="file" accept="image/jpeg" class="filepond" multiple />
<input name="filepond_two[]" id="file_two" type="file" accept="image/jpeg" class="filepond" multiple />
<script src="js/filepond.min.js"></script>
<script src="js/filepond-plugin-file-validate-size.min.js"></script>
<script src="js/filepond-plugin-image-edit.min.js"></script>
<script src="js/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="js/filepond-plugin-image-preview.min.js"></script>
<script>
    FilePond.setOptions({
      maxFiles: 4,
      maxFileSize: '2MB',
      imageResizeTargetWidth: 1200,
      labelIdle:                      'Drag and Drop up to 4 photos',
      labelFileProcessing:            'Uploading',
      labelFileProcessingComplete:    'Upload complete',
      labelFileProcessingAborted:     'Upload cancelled',
      labelFileProcessingError:       'Error during upload',
      labelFileProcessingRevertError: 'Error during revert',
      labelFileRemoveError:           'Error during remove',
      labelTapToCancel:               'tap to cancel',
      labelTapToRetry:                'tap to retry',
      labelTapToUndo:                 'tap to undo',
      server: 'photos/filepond/'
    });
    FilePond.registerPlugin(
      FilePondPluginImagePreview,
      FilePondPluginImageExifOrientation,
      FilePondPluginFileValidateSize,
      FilePondPluginImageEdit
    );
    const inputElements = document.querySelectorAll('input[type="file"]');
    Array.from(inputElements).forEach(inputElement => {
      FilePond.create(inputElement);
    })
</script>

此更改将 filepond 样式正确地应用于两个输入，但是更改输入的名称似乎会中断上传。

Answer 1

深入 filepond 文件夹，我在 config.php 文件中看到了这个：

// where to get files from
const ENTRY_FIELD = array('filepond');

所以我添加了我想使用的字段名称等“瞧”！

// where to get files from
const ENTRY_FIELD = array('filepond', 'filepond_one', 'filepond_two');

希望这对其他人有所帮助，因为我在这个问题上停留了一天:-)

Filepond：如何将 filepond 配置为在同一表单中具有 1 个以上的 filepond 字段？

Filepond: how to configure filepond to have more than 1 filepond field in the same form?

php

file-upload

multifile-uploader

filepond