Question

使用Filepond插件，我想为setOptions的每个实例分别设置Filepond。问题是我不知道如何让setOptions在每个实例上都不能正常工作。

我如何设置插件以将每个.filepond输入识别为自己的实例，但是在每个输入上允许使用不同的setOptions？

/*
We want to preview images, so we need to register the Image Preview plugin
*/
FilePond.registerPlugin(
  // encodes the file as base64 data
  FilePondPluginFileEncode,

  // validates the size of the file
  FilePondPluginFileValidateSize,

  // corrects mobile image orientation
  FilePondPluginImageExifOrientation,

  // previews dropped images
  FilePondPluginImagePreview
);
// get a collection of elements with class filepond
const inputElements = document.querySelectorAll(".filepond");

// loop over input elements
Array.from(inputElements).forEach((inputElement) => {
  // create a FilePond instance at the input element location
  FilePond.create(inputElement);
});

FilePond.setOptions({
  labelIdle: 'Drag & Drop your file or <span class="filepond--label-action"> Browse </span>'
});

.filepond--item {
  height: 90px !important;
  width: 90px;
  overflow: hidden;
}


/**
 * FilePond Custom Styles
 */

.filepond--drop-label {
  color: #4c4e53;
}

.filepond--label-action {
  text-decoration-color: #babdc0;
}

.filepond--panel-root {
  border-radius: 2em;
  background-color: #edf0f4;
  height: 1em;
}

.filepond--item-panel {
  background-color: #595e68;
}

.filepond--drip-blob {
  background-color: #7f8a9a;
}

<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

<!--
The classic file input element we'll enhance to a file pond
-->
<input type="file" class="filepond filepond--first" name="filepond" multiple data-max-file-size="3MB" data-max-files="5" />

<input type="file" class="filepond filepond--second" name="filepond" multiple data-max-file-size="3MB" data-max-files="1" />

<!-- file upload itself is disabled in this pen -->

Answer 1

FilePond.setOptions将为所有实例分配选项。

调用FilePond.create将返回创建的实例，并且该实例也将具有setOptions方法。因此，如果您要为特定实例设置选项，可以致电myInstance.setOptions。

Filepond图片上传器-多个实例上的setOptions

1 个答案: