温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Not able to see the preview of the image in filepond

其他 - 无法在Filepond中查看图像的预览

发布于 2020-03-27 11:31:01

我正在尝试使用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'/>

我无法确定是否还有其他步骤。

查看更多

查看更多

提问者
Harshita
被浏览
49
Olesia 2019-07-09 16:07

如果还不算太晚,这里是一个有效的演示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>

发布
问题

分享
好友

手机
浏览

扫码手机浏览