如何设置 FilePond js 图像预览

debugcn 发表于 Dev

奥萨罗

我正在尝试使用 FilePond 来允许用户上传拖放图像。我已经设置了 FilePond 拖放功能，并且正在尝试实现图像预览功能。我已经附加了 css 和 js 并将其包含在我的 html 中。图像预览仍然不起作用。

{% extends 'main/dashboardbase.html'%}
{% block content %}
{% load static %}
<!doctype html>
<html lang="en">
 <head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no">
<link rel="stylesheet "type="text/css" href="{% static 'main/add.css'%}">
<link rel="stylesheet "type="text/css" href="{% static 'main/filepond.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'main/filepond-plugin-image-preview.css'%}">
 </head>
 <body>
  <button type="submit" id="add">Save</button>
  <a href="{% url 'main:products'%}">
    <button id="cancel" >Cancel</button>
  </a>
  <div class="col-sm-12 col-lg-6" id="inner">
    <form method="POST" enctype="multipart/form-data" id="inputform" name="form1">
        {% csrf_token %}
        <h4>Title</h4>
        <input type="text" name="product_title" id="product_title" placeholder="Give your product a name">
        <h4>Price</h4>
        <input type="text" name="product_price" id="product_price" placeholder="0.00">
        <h4>Description</h4>
        <input type="text" name="product_description" id="product_description" placeholder="Write a description about your product">
        <input type="file" name="product_images">
    </form>

  </div>
    <script type="text/javascript" src="{% static 'main/add.js'%}"></script>
    <script src="{% static 'main/filepond-plugin-image-preview.js'%}"></script>
    <script src="{% static 'main/filepond.js'%}"></script>
    <script>
        const inputElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create(inputElement);

        FilePond.setOptions({
          server: '#'
        });
    </script>
 </body>
</html>

{% endblock%}

费斯勒

确保已加载“filepond-plugin-image-preview.min.css”。那是我的问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。