Dropzone配合Django实现Excel自动上传后页面未刷新如何解决

Dropzone默认使用异步AJAX方式完成文件上传，不会像传统form表单提交那样自动加载、渲染后端返回的新页面内容，因此即便视图层执行了render方法返回了带数据的模板，前端也不会自动更新页面。
另外你的HTML表单缺少必要的提交属性，也可能导致偶发的上传异常。

方案1：最小改动，复用现有模板渲染逻辑 #

仅需修改前端代码，在Dropzone上传成功后直接用后端返回的HTML替换当前页面内容即可，无需修改后端视图代码：

第一步：修正表单属性 #

给你的form标签补充method和enctype属性：

<form action="{% url 'auditoria_app:index' %}" class="dropzone" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="fallback">
      <input name="file" type="file" />
    </div>
</form>

第二步：添加Dropzone自定义配置 #

在引入dropzone.js的代码下方添加如下JS代码，手动初始化Dropzone并监听上传成功事件：

<script>
// 禁用自动初始化，避免重复挂载
Dropzone.autoDiscover = false;
// 手动初始化Dropzone
const myDropzone = new Dropzone(".dropzone", {
    // 可选配置：限制仅上传Excel文件
    acceptedFiles: ".xlsx,.xls",
    // 上传成功回调
    success: function(file, response) {
        // 直接用后端返回的渲染好的HTML替换当前页面内容
        document.open();
        document.write(response);
        document.close();
    },
    // 上传失败回调，可自定义错误提示
    error: function(file, errorMessage) {
        alert("文件上传失败：" + errorMessage);
    }
});
</script>

方案2：前后端分离交互（无整页刷新） #

如果不需要整页刷新，可以调整后端返回格式，前端拿到数据后动态渲染：

1. 后端视图层将原render返回改为JsonResponse，把ibms、numeroIbms、output等数据序列化后返回
2. 前端在Dropzone的success回调中拿到返回的JSON数据，通过DOM操作动态更新页面内容

你当前不需要存储Excel文件的需求已经满足：Django的request.FILES默认会将小体积文件保存在内存中，不会写入磁盘，直接用openpyxl读取即可，无需额外处理。

内容的提问来源于stack exchange，提问作者Felipe Dourado