我正在尝试使用 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'/>
我无法弄清楚是否有任何其他步骤。