django - Ajax表单提交，文件未提交

Question

我正在尝试为我的 Django 表单实现 AJAX 表单提交。

文件是在没有 AJAX 的情况下提交的，因此服务器端的逻辑似乎正常工作。使用ajax，除了文件之外的其余值都会被提交。

这是我正在实现的代码，

AJAX表单提交

(function() {
  // using jQuery
  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;
  }
  var csrftoken = getCookie('csrftoken');
  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type)) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
  });
})();

jquery

$('#save-form').live('submit', function(event) { // catch the form's submit event
  event.preventDefault();
  $.ajax({ // create an AJAX call...
      data: $(this).serialize(), // get the form data
      type: $(this).attr('method'), // GET or POST
      url: '/save/', // the file to call
      success: function(response) { // on success..
          $('#modalsave-form').html(response); // update the DIV
      }
  });
  return false;
});

HTML 表单

<form class="form-horizontal" id="save-form" enctype="multipart/form-data" method="post" action="/save/">
    <div class="control-group">
        <label class="control-label" for="id_body">Write Something</label>
        <div class="controls">
          <textarea class="typeaheadfun" id="id_body" rows="3" cols="100" name="body" placeholder="Scribble Body" style="width: 455px;"></textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="id_media">Add a File</label>
        <div class="controls">
          <input type="file" name="media" id="id_media"/>
        </div>
    </div>
    <hr>
    <input class="btn btn-primary pull-right" type="submit" value="Post!" />
    <br>
    {% csrf_token %}
</form>

Answer 1

当您提交 HTML 表单时，它通常使用 GET 将表单的数据发送到服务器。或POST数据 HTML header 。然而，当您需要有效地将二进制数据或附加文件发送到服务器时，HTML 作为其一部分 spec有一种不同的方法来发送此类数据。 enctype <form> 的属性标签指定浏览器应使用哪种方法将数据发送到服务器。要发送文件，multipart/form-data是广泛使用的编码方法。

当您尝试在没有ajax的情况下发送表单时，浏览器使用 multipart/form-data 将文件数据发送到服务器然而，当您使用 ajax 提交表单时，您将执行以下编码:

data: $(this).serialize()

该步骤不会按照服务器期望数据的方式对数据进行编码，因此您的 ajax 无法工作。

为了使其正常工作，您应该使用 ajax 提交整个表单，而不是手动提交表单数据。手动执行此操作很棘手，而且已经有插件可以执行此操作。此类插件之一是 jQuery Form Plugin 。它允许使用 ajax 提交整个表单。以下是 js 代码，应该可以让您了解如何将其与您的设置集成:

$('#save-form').live('submit', function(event) {
    event.preventDefault();

    $(this).ajaxSubmit({
        url: '/save/', // the file to call
        success: function(response) {
            $('#modalsave-form').html(response);
        }
    });

    return false;
});