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

Question

I am new to Django and I'm trying to implement drag and drop file uploading using dropzone.js .我是 Django 的新手，我正在尝试使用dropzone.js实现拖放文件上传。 I was follow this tutorial to start of with.我是按照本教程开始的。 Dropzone is working fine and the file is being uploaded and stored correctly, my issues comes with the customization of the dropzone instance. Dropzone 工作正常，文件正在正确上传和存储，我的问题与 dropzone 实例的自定义有关。 I created a second javascript file to create my custom dropzone like the tutorial showed and included it into the django template.我创建了第二个 javascript 文件来创建我的自定义 dropzone，如教程所示，并将其包含到 django 模板中。 But for some reason this does not change anything, with or without customization javascript file, the dropzone looks exactly the same.但是由于某种原因，这并没有改变任何东西，无论是否定制 javascript 文件，dropzone 看起来都完全相同。

The javascript file: javascript 文件：

Dropzone.autoDiscovery = false;

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

The django template file I'm trying to include the script into: 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>

My static file directory is setup correctly, all my other static files load without issues and from the command prompt [15/Jan/2021 15:17:16] "GET /static/converter/main.js HTTP/1.1" 304 0 I can see that the file was found, since 304 stands for Not Modified .我的 static 文件目录设置正确，我的所有其他 static 文件加载没有问题，并且从命令提示符[15/Jan/2021 15:17:16] "GET /static/converter/main.js HTTP/1.1" 304 0可以看到文件被找到，因为 304 代表Not Modified 。

Since I do not know any javascript, I'm not sure if I made a mistake in the javascript file, or if it is a deeper issue.由于我不知道任何 javascript，我不确定我是否在 javascript 文件中犯了错误，或者它是否是一个更深层次的问题。 Any help is appreciated.任何帮助表示赞赏。

Answer 1

You need to load the dropzone file before main.js since main.js requires the Dropzone member to exist.您需要在 main.js 之前加载 dropzone 文件，因为 main.js 需要 Dropzone 成员存在。

Answer 2

Ok so I found my error, it was a quick fix caused, as always, by human error.好的，所以我发现了我的错误，这是一个快速修复，一如既往，是由人为错误引起的。

as @schillingt answered, I had to place the main.js include after the dropzone.js正如@schillingt 回答的那样，我必须将 main.js 包含在 dropzone.js 之后
I misspelled Dropzone.autoDiscover = false;我拼错Dropzone.autoDiscover = false; as Dropzone.autoDiscovery = false;作为Dropzone.autoDiscovery = false;
I had a = instead of a : in after dictDefaultMessage in main.js在 main.js 中的dictDefaultMessage之后，我有一个=而不是:

Final main.js:最终的 main.js：


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

Final Django template:最终 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 文件？

问题描述

2 个解决方案

解决方案1
1 2021-01-15 15:33:40

解决方案2
0 已采纳 2021-01-15 17:03:05

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

问题描述

2 个解决方案

解决方案1 1 2021-01-15 15:33:40

解决方案2 0 已采纳 2021-01-15 17:03:05

解决方案1
1 2021-01-15 15:33:40

解决方案2
0 已采纳 2021-01-15 17:03:05