Не удается увидеть предварительный просмотр изображения в filepond - PullRequest
Новая
       9

Не удается увидеть предварительный просмотр изображения в filepond

0 голосов
/ 03 июля 2019

Я пытаюсь использовать filepond для загрузки некоторых изображений.Загрузка работает правильно.Я также хотел бы видеть предварительный просмотр изображений при загрузке.Я пытался использовать плагин, но, видимо, я не вижу изменений. 

{% block style %}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet">
 {% endblock %}

Ниже приведены мои сценарии 

{% block scripts %}
</script>
<!-- FILE POND STUFF -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
FilePond.parse(document.body);
</script>
{% endblock %}

Это мой файл JS 

$('#file_upload').change(function() {
    const inputElement = document.querySelector('input[type="file"]');

    FilePond.registerPlugin(FilePondPluginImagePreview);

    const pond = FilePond.create( inputElement, {
    allowMultiple: true,
    allowFileEncode: true,
  });

}

Мой HTML-код 

<input type="file" name='file' class='filepond' multiple  id='file_upload'/>

Я не могу выяснить, есть ли какие-либо дополнительные шаги к этому.

1 Ответ

0 голосов
/ 09 июля 2019

Если еще не поздно, вот рабочая демоверсия https://jsfiddle.net/yza54qp0/1/

const inputElement = document.querySelector('#file_upload');

FilePond.registerPlugin(FilePondPluginImagePreview);

  const pond = FilePond.create( inputElement, {
    allowMultiple: true,
    allowFileEncode: true,
});
<link href="https://unpkg.com/filepond-plugin-image-preview@4.2.1/dist/filepond-plugin-image-preview.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/filepond@4.4.10/dist/filepond.css" rel="stylesheet"/>
<script src="https://unpkg.com/filepond-plugin-image-preview@4.2.1/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond@4.4.10/dist/filepond.js"></script>

<input type="file" name='file' class='filepond' multiple  id='file_upload'/>

<script>
FilePond.parse(document.body);
</script>
...