为什么 Django 不能正确加载我的 javascript 文件？

Question

我是 Django 的新手，我正在尝试使用 dropzone.js. I was follow this tutorial 来实现拖放文件上传。 Dropzone 工作正常并且文件正在正确上传和存储，我的问题来自 dropzone 实例的自定义。我创建了第二个 javascript 文件来创建我的自定义放置区，就像教程中显示的那样，并将其包含在 django 模板中。但出于某种原因，这不会改变任何东西，无论是否有自定义 javascript 文件，dropzone 看起来完全一样。

javascript 文件：

Dropzone.autoDiscovery = false;

const dropzone = new Dropzone("#drop", {
    dictDefaultMessage = "Upload your PDF here",
    clickable: false,
    url: "/upload",
    maxFiles: 1,
    acceptedFiles: ".pdf",
});

我试图将脚本包含到的 django 模板文件：

{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PDF2Notes</title>
  </head>
  <body>
    <form method="POST" action="/upload" class="dropzone dz" id="drop">
      {% csrf_token %}
      <div class="fallback">
        <input name="file" type="file">
      </div>
    </form>

    <!--default stylesheet-->
    <link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
    <script type="text/javascript" src="{% static 'converter/main.js' %}"></script>

    <!--dropzone js & css-->
    <link rel="stylesheet" tpye="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
    <script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
  
  </body>
</html>

我的静态文件目录设置正确，我的所有其他静态文件从命令提示符加载都没有问题 [15/Jan/2021 15:17:16] "GET /static/converter/main.js HTTP/1.1" 304 0 我可以看到文件已找到，因为 304 代表 Not Modified.

因为我不知道任何 javascript，我不确定我是否在 javascript 文件中犯了错误，或者这是一个更深层次的问题。感谢任何帮助。

Answer 1

您需要在 main.js 之前加载 dropzone 文件，因为 main.js 需要 Dropzone 成员存在。

Answer 2

好的，所以我发现了我的错误，这是一个快速修复，一如既往，是人为错误造成的。

正如@schillingt 回答的那样，我不得不将 main.js 包含在 dropzone.js
之后
我把 Dropzone.autoDiscover = false; 拼错为 Dropzone.autoDiscovery = false;
我在 main.js
中的 dictDefaultMessage 之后有一个 = 而不是 :

决赛 main.js:


var myDropzone = new Dropzone("#drop", {
    dictDefaultMessage: "Upload your PDF here",
    clickable: false,
    url: "/upload",
    maxFiles: 1,
    acceptedFiles: ".pdf",
});

最终 Django 模板：

{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PDF2Notes</title>
  </head>
  <body>
    <form method="POST" action="/upload" class="dropzone dz" id="drop">
      {% csrf_token %}
      <div class="fallback">
        <input name="file" type="file">
      </div>
    </form>

    <!--dropzone js & css-->
    <link rel="stylesheet" type="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
    <script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>

    <!--default stylesheet-->
    <link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
    <script type="text/javascript" src="{% static 'converter/main.js' %}"></script>

  </body>
</html>

为什么 Django 不能正确加载我的 javascript 文件？

Why doesn't Django load my javascript file correctly?

javascript

django

django-templates

dropzone.js