CSRF 令牌缺失或不正确.Django + jQuery File Upload.

Question

我试图在Django项目上实现jQuery文件上传。但是每次我提交图像时，都会发生错误："CSRF 验证失败。请求已中止。

models.py

class Photo(models.Model):
title = models.CharField(max_length=255, blank=True)
image = models.ImageField(upload_to='photos/')
uploaded_at = models.DateTimeField(auto_now_add=True)

主.js

$(function () {
/* 1. OPEN THE FILE EXPLORER WINDOW */
$(".js-upload-photos").click(function () {
$("#image-upload").click();
});
/* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
$("#image-upload").fileupload({
dataType: 'json',
done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
if (data.result.is_valid) {
$("#gallery tbody").prepend(
"<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
)
}
}
});
});

模板.html

{# 1. BUTTON TO TRIGGER THE ACTION #}
<button type="button" class="btn btn-primary js-upload-photos">
<span class="glyphicon glyphicon-cloud-upload"></span> Upload photos
</button>
{# 2. FILE INPUT TO BE USED BY THE PLUG-IN #}
<input id="image-upload" type="file" name="file" multiple
style="display: none;"
data-url="{% url 'add_location_step_3_url' %}"
data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"'>
{# 3. DISPLAY THE UPLOADED PHOTOS #}
{% for photo in photos %}
<a href="{{ photo.file.url }}">{{ photo.file.name }}
{% endfor %}

Answer 1

让我们试试这个

{# 1. BUTTON TO TRIGGER THE ACTION #}
<button type="button" class="btn btn-primary js-upload-photos" formmethod="post">
<span class="glyphicon glyphicon-cloud-upload"></span> Upload photos
</button>

---

如果它不起作用，也尝试将其留在表单中

<form method="post">
{% csrf_token %}
{# 1. BUTTON TO TRIGGER THE ACTION #}
<button type="button" class="btn btn-primary js-upload-photos">
<span class="glyphicon glyphicon-cloud-upload"></span> Upload photos
</button>
{# 2. FILE INPUT TO BE USED BY THE PLUG-IN #}
<input id="image-upload" type="file" name="file" multiple
style="display: none;"
data-url="{% url 'add_location_step_3_url' %}"
data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"'>
</form>