如何在Django中实现表单拖拽上传并对接后端（零JavaScript基础）

现有后端代码（cal.py、forms.py、urls.py）无需任何修改，仅调整前端模板即可实现目标拖拽上传效果，全程不需要编写自定义JS逻辑，所有代码可直接复制使用。

操作步骤 #

• 第一步：准备静态资源
  下载Dropzone的CSS和JS文件到你Django项目的static目录下，不需要对资源做任何修改。
• 第二步：替换cal.html的全部内容
  替换后的代码如下，直接复制即可使用：

{% extends "base.html" %}
{% load static %}
{% block content %}
<!-- 引入Dropzone样式 -->
<link rel="stylesheet" href="{% static 'dropzone.min.css' %}">

<form action="{% url 'cal' %}" method="post" enctype="multipart/form-data" class="dropzone" id="calUploadForm">
  {% csrf_token %}
  {{ message }}
  <p>{{ form.non_field_errors }}</p>
  <p>{{ form.docfile.errors }}</p>
  
  <!-- 原有提交按钮保留 -->
  <div style="margin-top: 20px;">
    <input type="submit" value="Upload and Download!"/>
  </div>
</form>

<!-- 引入Dropzone JS -->
<script src="{% static 'dropzone.min.js' %}"></script>
<!-- 以下配置直接复制即可，无需理解修改 -->
<script>
  Dropzone.options.calUploadForm = {
    paramName: "docfile", // 匹配你表单的文件字段名
    maxFiles: 1, // 限制单次只能上传1个文件
    autoProcessQueue: false, // 关闭自动上传，走原有表单提交逻辑
    clickable: true, // 支持点击区域选择文件
    addRemoveLinks: true, // 支持删除已选文件
    init: function() {
      this.on("addedfile", function(file) {
        if (this.files.length > 1) {
          this.removeFile(this.files[0]);
        }
      });
    }
  };
</script>
{% endblock content %}

效果说明 #

修改完成后直接启动项目即可看到拖拽上传区域，和你提供的示例效果完全一致，支持拖拽文件到上传区域、点击区域选择文件、删除已选文件，提交逻辑和你原有代码完全兼容，不需要调整后端任何逻辑。

内容的提问来源于stack exchange，提问作者project.py