Dropzone Js csrftoken答案

【问题标题】：Dropzone Js csrftokenDropzone Js csrftoken
【发布时间】：2015-08-14 21:11:12
【问题描述】：

我有一个带有表单元素的 django 模板，其中包括一些输入文本编辑和一个提交按钮以及一个带有 DropzoneJS 的用户头像上传器。问题是我不能将DropzonJs 放入表单中的 div 中，因为它会引发csrf_token error。当我在div 中为dropzoneJS; 输入csrf_token 时，没有任何变化。我发现csrf_token 仅适用于HTML 表单元素。这是我的模板：

<form role="form" method="POST">
    {% csrf_token %}
    <h5>Edit Profile Details</h5>
    <div class="content">
        <h1>{{ username }}</h1>
        <!-- My other fields here -->
        <div class="m-b-sm">
             <img alt="image" class="img-circle" src="{% static 'img/profile.jpg' %}" />
        </div>
        <!-- Here is the div that contains DropzoneJS -->
        <div class="dropzone dropzone-previews" id="my-awesome-dropzone" action="">
            {% csrf_token %}
        </div>
    </div>
    <!-- ... -->

我的想法是，如果我在表单中添加 {% csrf_token %}，则无需在其内部元素中添加其他一些 {% csrf_token %}。

DropzoneJS 使用如下形式：

<form class="dropzone" action="{% url "test_avatar" %}" method="post" enctype="multipart/form-data" id="my-awesome-dropzone">
   {% csrf_token %}
</form>

但是由于嵌套HTML 表单元素的错误，我不能在我的表单中使用这个表单。我该怎么办？

【问题讨论】：

标签： javascript html django forms dropzone.js

【解决方案1】：

Dennis 的回答是一个很好的线索，但您需要更多详细信息才能到达那里。您将在非表单 HTML 元素上以编程方式制作 Dropzone，然后将 CSRF 令牌添加到它在文件上传期间发送的数据中。

（顺便说一句，如果您在站点的其他地方使用 AJAX，您可能会使用框架 (jQuery) 挂钩将 CSRF 令牌附加到所有 AJAX 帖子 --- 但 Dropzone 没有使用您的框架，这就是它不使用的原因'不获取 CSRF 令牌。）

我们开始吧。使用常规 div（或其他非表单 HTML 元素）作为 Dropzone：

<div id="my_dropzone"></div>

在 JavaScript 中定义一个函数来帮助你获取 CSRF 令牌：

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }   
        }   
    }   
    return cookieValue;
}

制作你的 Dropzone。在文件上传期间使用 params 字段发送 CSRF 令牌：

var my_dropzone = new Dropzone('#my_dropzone', {
    'url': '/avatar-upload', # url for view that handles upload
    'params': {'csrfmiddlewaretoken': getCookie('csrftoken')}
})

【讨论】：

【解决方案2】：

您应该以编程方式创建您的 dropzone 实例并将 csrf_token 附加到 formData 对象。

首先，将令牌存储在 html 中某处的 javascript 变量中：

（我自己使用 PHP/Laravel，所以我不确定这是否会打印出令牌，但你明白了..）

<script>
   token = {% csrf_token %};
</script>

然后在您的 javascript 文件（或内联）中创建 dropzone 实例：

var myDropzone = new Dropzone(".dropzone", {
   url: '/file/upload', // your test_avatar route here
   sending: function(file, xhr, formData) {
      formData.append("csrf_token", token);
      // the first parameter should be the fieldname that django is looking for
      // the second parameter being the token from the variable set in your html
   },
});

【讨论】：