我想在表单中有2个不同的文件上传字段,并使用filepond很好地管理图像上传。到目前为止,我可以使用文档提供的代码对一个表单中的单个字段毫无问题地使用filepond。
我假设可以进行以下更改来放置多个字段:
代码:
<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样式正确地应用于两个输入,但是更改输入的名称似乎破坏了上传。
深入到filepond文件夹中,我在config.php
文件中看到了以下内容:
// where to get files from
const ENTRY_FIELD = array('filepond');
因此,我添加了要使用的字段名称,例如“ voila”!
// where to get files from
const ENTRY_FIELD = array('filepond', 'filepond_one', 'filepond_two');
希望这对其他人有帮助,因为我一天坚持不懈:-)