javascript - Django 中的 Ajax POST 文件上传

Question

我正在尝试在我的 djano 应用程序中通过 Ajax post 处理带有文件字段的 POST 请求。我收到此错误:

Forbidden (CSRF token missing or incorrect.): /user/instance/create/new/awod/

这是我尝试过的:

来自 template.html

<div class="container" style="background-color: lightgray; opacity: 0.7;margin-top:10%;margin-left: 2%; padding-bottom: 10%;">
          <form method="post" class="form-horizontal" action="" id="gitForm" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="form-group">
          <label class="control-label" for="inputGroupSuccess1">Deployment Name:</label>
             <div class="input-group">
               <span class="input-group-addon">@</span>
               <input type="text" class="form-control" name="name" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
             </div>
          </div>
          <div class="form-group">
              <label class="control-label">Select File</label>
              <input type="file" id="inputGroupSuccess2" name="archive"  class="file" multiple   data-allowed-file-extensions='["zip", "tar"]'>
              <small id="fileHelp" class="form-text control-label" style="color:black">Upload a Tar or Zip archive without a Dockerfile, otherwise your deployment will fail.</small>
          </div>
          <div id="spinner" style="display: none;">
               <div class="f_circleG" id="frotateG_01"></div>
               <div class="f_circleG" id="frotateG_02"></div>
               <div class="f_circleG" id="frotateG_03"></div>
               <div class="f_circleG" id="frotateG_04"></div>
               <div class="f_circleG" id="frotateG_05"></div>
               <div class="f_circleG" id="frotateG_06"></div>
               <div class="f_circleG" id="frotateG_07"></div>
               <div class="f_circleG" id="frotateG_08"></div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg pull-right" value="Submit"> Submit </button>
                <span style="padding-right: 5%;float: right;"><a href="{% url 'users:new-instance' %}" class="btn btn-primary btn-lg"><img src="{% static 'images/go-back-arrow.svg' %}" style="width: 24px; height: 24px;"> Go Back! </a></span>
            </div>
          </form>
       </div>
      </div>
    </div>
</div>

我的javascript

<script type="text/javascript">
$(document).ajaxStart(function() {
   $('#spinner').show();
   console.log("ajax start")
});

$(document).ajaxStop(function() {
   $('#spinner').hide();
});
$(document).on('submit', '#gitForm', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url : '/user/instance/create/new/awod/',
        data: {
            name:$('#inputGroupSuccess1').val(),
            archive:$('#inputGroupSuccess2').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success:function () {
            $('#message').show();
            $('#inputGroupSuccess1').val('');
            $('#inputGroupSuccess2').val('');

        }
    })
});

即使当我控制台记录 csrf_token 字段时，它也会正确打印 csrf token 。

有什么问题吗？

请帮帮我!提前致谢!

Answer 1

虽然您可以在数据中传递 token ，但 recommended method是设置自定义 X-CSRFToken HTTP header :

$.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('');
    }
})

如您所见，该值是 csrftoken cookie(由 Django 设置)。我已使用 jQuery.cookie 库检索 token ，但您可以根据需要检索它。