如何使用php for循环创建FilePond实例，并使用插件

Question

I want to use a php for loop to create some file inputs with FilePond.

Each instance needs to have its own unique url, and use the plugins initiated. I have got the actual file uploads working, although the plugins don't seem to be getting used.

<?php
foreach ($objArray as $value) {
    $inputNumber2++;
?>
    <input name="input_<?= $inputNumber2; ?>_images[]" id="input_<?= $inputNumber2; ?>_images" class="filepond" type="files" multiple />
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window['input<?= $inputNumber2; ?>Images'] = FilePond.create(
                document.querySelector('#input_<?= $inputNumber2; ?>_images'),
                {
                    server: {
                        url: '<?= Config::get('URL'); ?>',
                        process: 'upload/images/input_<?= $inputNumber2; ?>_images',
                        revert: 'upload/revert',
                        load: 'files/',
                    },
                    <?php 
                    if (isset($value->imageArray) && count($value->imageArray) > 0) {
                        echo 'files: [';
                        foreach ($value->imageArray as $imageName) {
                            echo '{
                                source: "'.$imageName.'",
                                options: {
                                    type: "local",
                                    file: {
                                        name: "'.$imageName.'",
                                        type: "image/jpeg"
                                    }
                                }
                            },';
                        }
                        echo '],';
                    }
                    ?>
                }
            );
        });
    </script>
<?php } ?>
...
<script>
document.addEventListener('DOMContentLoaded', function() {
    FilePond.registerPlugin(
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation,
        FilePondPluginImagePreview,
        FilePondPluginImageTransform,
        FilePondPluginImageCrop,
        FilePondPluginImageResize
    );
    FilePond.setOptions({
        acceptedFileTypes: ['image/*'],
        labelIdle: 'Add images or <span class="filepond--label-action"> Browse </span>',
        imagePreviewMaxHeight: 100,
        imagePreviewZoomFactor: 1,

    });
});
</script>

I'm probably doing it wrong - how should I be doing it?

Also, it is picking up and using the custom label so some settings it is getting.

Answer 1

This line:

document.querySelector('#input_<?= $inputNumber2; ?>_images')

Returns a field with the id input_<?= $inputNumber2; ?>_images. But you've only assigned the name attribute to your input field. I suspect adding the id attribute to the input will solve the issue.

OR you can change the selector to:

document.querySelector('input[name="input_<?= $inputNumber2; ?>_images"]')