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

【问题标题】：Why doesn't Django load my javascript file correctly?为什么 Django 不能正确加载我的 javascript 文件？
【发布时间】：2021-01-15 15:30:49
【问题描述】：

我是 Django 新手，我正在尝试使用 dropzone.js 实现拖放文件上传。我开始关注this tutorial。 Dropzone 工作正常，文件正在正确上传和存储，我的问题与 dropzone 实例的自定义有关。我创建了第二个 javascript 文件来创建我的自定义 dropzone，如教程所示，并将其包含到 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 文件中犯了错误，或者它是否是一个更深层次的问题。任何帮助表示赞赏。

【问题讨论】：

标签： javascript django django-templates dropzone.js

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：