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

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

1 голос
/ 07 апреля 2019

Я сделал буквально все, чтобы заставить его работать, но он еще не работает

Я загрузил из cdn так же, как в документации по предварительному просмотру 

<!-- add to document <head> -->
<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.css" rel="stylesheet">

<!-- add before </body> -->
<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>

Для улучшения в filepondу меня есть элемент 

<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
</script>

и, наконец, 

<input type="file">

Он отображается в виде файла, а не с предварительным просмотром изображения.Что мне не хватает?

1 Ответ

0 голосов
/ 08 апреля 2019

Плагины не были зарегистрированы в FilePond.

Это должно работать: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FilePond Plugin Image Preview Demo</title>
    <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.css" rel="stylesheet">
</head>
<body>

    <input type="file"/>

    <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>
    // Register the plugin with FilePond
    FilePond.registerPlugin(FilePondPluginImagePreview);

    // Get a reference to the file input element
    const inputElement = document.querySelector('input[type="file"]');

    // Create the FilePond instance
    const pond = FilePond.create(inputElement);
    </script>

</body>
</html>

Демонстрационная версия здесь: https://pqina.github.io/filepond-plugin-image-preview/

Я смотрю документы и я вижу, как это сбивает с толку, улучшит их, как только у меня будет время.

...