如何解决“未捕获的参考错误:未定义FilePond".在FilePond中拖放 [英] How to fix "Uncaught reference error : FilePond is not defined" in FilePond drag and drop
本文介绍了如何解决“未捕获的参考错误:未定义FilePond".在FilePond中拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用FilePond在我的网站上实现拖放功能.我已经下载了Filepond的CSS和JS文件，并正确安装了它们.每当我尝试完成安装程序时，都会不断收到未捕获的参考错误:未定义FilePond".
I am trying to use FilePond to implement drag and drop functionality on my website. I have downloaded the filepond css and js files and attatched them correctly. I keep getting an "Uncaught reference error : FilePond is not defined" whenever I try to finish the setup.
{% 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">
<!-- Bootstrap CSS -->
<title>Hello, world!</title>
<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="filepond">
</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 );
</script>
</body>
</html>
{% endblock%}
推荐答案
您正确地加载了 FilePond.js 文件，但是您试图在加载之前使用它.要解决此问题，请在'DOMContentLoaded'事件处理程序内移动初始化逻辑.
Your loading the FilePond.js file correctly but you're trying to use it before it has loaded. To solve this, move the initialization logic inside a 'DOMContentLoaded' event handler.
<script>
document.addEventListener('DOMContentLoaded', function() {
// Register any plugins
FilePond.registerPlugin(FilePondPluginImagePreview);
// Create FilePond object
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);
});
</script>
这篇关于如何解决“未捕获的参考错误:未定义FilePond".在FilePond中拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
