Javascript django中的Ajax POST文件上传

我正试图通过我的djano应用程序中的Ajax POST处理带有文件字段的POST请求。 我得到了这个错误：

禁用的CSRF令牌丢失或不正确。：/user/instance/create/new/awod/

以下是我尝试过的：

从template.html

我的javascript

即使在I console.log csrf_令牌字段时，它也会正确打印csrf令牌

有什么不对劲吗

请帮帮我！

---

提前谢谢

虽然您可以在数据中传递令牌，但需要设置自定义X-CSRFToken HTTP头：

$.ajax({
    type: 'POST',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    url : '/user/instance/create/new/awod/',
    data: {
        name:$('#inputGroupSuccess1').val(),
        archive:$('#inputGroupSuccess2').val()
    },
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success:function () {
        $('#message').show();
        $('#inputGroupSuccess1').val('');
        $('#inputGroupSuccess2').val('');
    }
})

---

如您所见，该值是Django设置的csrftoken cookie。我已经使用jQuery.cookie库来检索令牌，但是您可以按照自己的喜好来检索它。

使用async:false通常是一个坏主意，因为它会防止页面上的其他事件触发。您可能不希望代码暂停，我建议您像这样使用ajax：

$(document).on('submit', '#gitForm', function (e) {
    var form_data = new FormData($(this)[0]);
    $.ajax({
        type:'POST',
        url:'/user/instance/create/new/awod/',
        processData: false,
        contentType: false,
        data : form_data,
        success: function(response) {
          $('#message').show();
          $('#inputGroupSuccess1').val('');
          $('#inputGroupSuccess2').val('');
        }
    });
});

---

这也可以解决您使用csrf_令牌的问题。

正如我在文章底部提到的，我使用jQuery.cookie库检索令牌。您需要包括对库的引用，例如，通过添加Django模板。它返回[Error]加载资源失败：服务器响应状态为500 Internal server Error awod，浏览器控制台第0行。@AbdulRehman显示您的视图，您不应该使用javascript获得错误500。。在你看来一定是另外一回事。

$.ajax({
    type: 'POST',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    url : '/user/instance/create/new/awod/',
    data: {
        name:$('#inputGroupSuccess1').val(),
        archive:$('#inputGroupSuccess2').val()
    },
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success:function () {
        $('#message').show();
        $('#inputGroupSuccess1').val('');
        $('#inputGroupSuccess2').val('');
    }
})

$(document).on('submit', '#gitForm', function (e) {
    var form_data = new FormData($(this)[0]);
    $.ajax({
        type:'POST',
        url:'/user/instance/create/new/awod/',
        processData: false,
        contentType: false,
        data : form_data,
        success: function(response) {
          $('#message').show();
          $('#inputGroupSuccess1').val('');
          $('#inputGroupSuccess2').val('');
        }
    });
});