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

Question

我想使用 phpfor循环使用 FilePond 创建一些文件输入。

每个实例都需要有自己唯一的 url，并使用启动的插件。尽管插件似乎没有被使用，但我已经完成了实际的文件上传工作。

<?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>

我可能做错了 - 我应该怎么做？

此外，它正在拾取并使用自定义标签，因此它正在获得一些设置。

Answer 1

这一行：

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

返回一个带有 的字段id input_<?= $inputNumber2; ?>_images。但是您只将name属性分配给您的输入字段。我怀疑将id属性添加到输入将解决问题。

或者您可以将选择器更改为：

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