如何将Django默认文件上传按钮改为现代拖拽上传样式且无需使用JS？

可以实现，无需引入JavaScript，仅通过修改HTML模板结构、新增CSS样式即可达到你要的拖拽上传样式，原有后端逻辑无需做任何调整。

实现原理 #

原生input[type=file]本身已经支持文件拖拽功能，只需要将原生输入框设为透明并覆盖在自定义的拖拽区域上方，用户点击、拖拽的操作实际都是触发原生输入框的默认行为，不需要额外写JS交互逻辑。

第一步：修改模板代码 #

你可以直接替换原有cal.html的代码如下，样式可以先写在模板中测试，后续可以迁移到你的公共CSS文件统一管理：

{% extends "base.html" %}
{% load static %}
{% block content %}
<style>
.upload-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 20px 0;
}
/* 隐藏原生文件输入框，同时让它覆盖整个上传区域 */
.upload-wrap input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
/* 自定义拖拽区域样式 */
.upload-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s ease;
}
/*  hover、拖拽文件到区域时的交互样式 */
.upload-wrap:hover .upload-area,
.upload-wrap input[type="file"]:focus + .upload-area {
  border-color: #2563eb;
  background-color: #eff6ff;
}
.upload-area p {
  margin: 10px 0 0;
  color: #666;
  font-size: 16px;
}
.upload-area .tip {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}
</style>

<form action="{% url "cal" %}" method="post" enctype="multipart/form-data" class="dropzone">
  {% csrf_token %}
  {{ message }}
  <p>{{ form.non_field_errors }}</p>
  <p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
  <p>
    {{ form.docfile.errors }}
    <div class="upload-wrap">
      {{ form.docfile }}
      <div class="upload-area">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="17 8 12 3 7 8"></polyline>
          <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
        <p>拖拽Excel文件到此处或点击上传</p>
        <p class="tip">上传后将自动处理并导出结果</p>
      </div>
    </div>
  </p>
  <p><input type="submit" value="Upload and Download!"/></p>
</form>
{% endblock content %}

注意事项 #

• 无需修改任何后端视图代码，原有文件接收、pandas计算、导出的逻辑完全不受影响
• 样式中的颜色、尺寸、提示文案都可以根据你的站点风格自行调整

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