带有单独提交和上传按钮的 Django 应用程序

Posted 2023-02-24

【中文标题】带有单独提交和上传按钮的 Django 应用程序

【英文标题】：Django app with form with separate SUBMIT and UPLOAD buttons

【发布时间】：2018-11-11 23:34:15

【问题描述】：

我的 index.html 文件包含一个获得大量用户输入的大型表单。在表格的最后，我想给用户一个使用按钮上传文件的选项。但这不应触发表单提交，因为他们可能希望继续将数据输入到表单的其他部分。以下是 HTML 的基本概述：

((some other stuff))
<form id="outer_form">
    ((other HTML stuff))
    <form enctype="multipart/form-data" method="post" action="% url 'my_app:upload_file' %" id="file-upload-form">
        % csrf_token %
        <input type="file" name="file" style="display: none">
        <button type="button" class="btn btn-primary" id="btn-upload-file">Upload file</button>
    </form>
    ((more other stuff))
    ((submit button for the outer form))
</form>
((other stuff))

当然，这是行不通的，因为我嵌套了非法的 FORM 元素。如何结合这两个想法，保留 CSFR 令牌并为上传按钮使用正确的 django 操作？谢谢！

【问题讨论】：

您可以通过ajax上传文件，然后继续填写表格

【参考方案1】：

如果在提交表单之前知道后端文件没有任何价值（这意味着解析文件不会以任何方式修改表单或给您带来优势），您可以“只是”将该文件与其余部分一起保留表单字段，仅在按下整个表单的实际提交按钮时才提交，并删除单独的上传按钮。

如果你仍然需要它，首先你需要有 django 后端功能来接受文件上传（通常与 POSTed 分开查看，除非你在一个视图中检查所有内容并且 在 HTML 中，您需要将上传按钮连接到 AJAX 调用。

[编辑] 有一些主题可以处理对 Django 的 AJAX 调用，其中一个 Django JQuery Ajax File Upload 但是我在 AJAX 调用中对 CSRF 的时事有点迷茫。

jQuery 将使您的生活更轻松，但即使使用原生 javascript，您也可以做到这一点，使用 Javascript AJAX call 中提供的一些信息，忽略 php 方面。

您可以在按钮本身中添加指向 onlick 事件的链接

<button type="button" class="btn btn-primary" id="btn-upload-file" onclick="uploadImage()">Upload file</button>

或在 javascript 中“稍后”附加

document.getElementById('btn-upload-file').onclick(uploadImage())

您需要像在链接问题中一样通过使用 id 标签访问文件来处理该文件，否则将更难获取内容，例如

<input type="file" name="file" id="upload-file" style="display: none">

如果您在 Django 方面遇到问题，请发表评论，不知道您是否有模型支持，很难提出正确的建议。

【讨论】：

我使用了这两种解决方案的一部分，但最后我决定大大简化并避免所有的javascript。我决定服务器可以在提交整个表单时验证文件，这让生活变得更轻松。感谢您的帮助！

【参考方案2】：

你需要一个 javascript 函数来做你想做的事。开始做类似的事情：

function submitForm(action) 
  var form = document.getElementById('form1');
  form.action = action;
  form.submit();

然后为你的按钮给他们一个onclick = submitForm('% url 'urlyourusing' %')"

您的 CSFR 应该结转。如果不是，您需要在 ajax 调用中定义它。

您还需要确保在您的 html 中包含 javascript。就像下面的例子。

<script src= "% static '/search/buttonsubmit.js' %" type="text/javascript"></script>