Question

我的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操作？谢谢！

Answer 1

您需要一个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>

Answer 2

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

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

[编辑]有一些主题可以处理对Django的AJAX调用，如果有的话 Django JQuery Ajax File Upload 但是我在AJAX调用中略微迷失了CSRF的时事。

jQuery会让你的生活变得更轻松，但即使使用vanilla Javascript，你也可以使用Javascript AJAX call中提供的一些信息，忽略PHP方面。

您可以在按钮本身

中添加onlick事件的链接

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

或附加＆＃34;以后＆＃34;在javascript中

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

您需要通过使用id标签访问文件，类似于链接问题处理文件，否则将更难获取内容，例如

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

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

Django应用程序，带有单独的SUBMIT和UPLOAD按钮

2 个答案: