jquery - 使用ajax上传时Django文件丢失

Question

我从事项目 django (V2.1 + python 3.6) 上传文本文件。我有一个要上传的文件的模板，但发送表单时文件丢失了；我不知道出了什么问题。

这是我的模型:

from django.db import models

class Document(models.Model):
    description = models.CharField(max_length=255, blank=True)
    document = models.FileField(upload_to='documents/')
    uploaded_at = models.DateTimeField(auto_now_add=True)

这是我的模板:

<form enctype="multipart/form-data" method="post" action="{% url 'add_document' %}" class="js-add-document-form">
  {% csrf_token %}
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Add document</h4>
  </div>
  <div class="modal-body">
    {% include 'books/includes/partial_doc_form.html' %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">ADD</button>
  </div>
</form>

这是我的观点:

def save_doc_form(request, form, template_name):
    data = dict()
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            docs = Document.objects.all()
            data['html_doc_list'] = render_to_string('docs/includes/partial_docs_list.html', {
                'docs': docs
            })
        else:
            data['form_is_valid'] = False
    context = {'form': form}
    data['html_form'] = render_to_string(template_name, context, request=request)
    return JsonResponse(data)


def doc_create(request):
    if request.method == 'POST':
        form = DocumentForm(request.POST, request.FILES)
    else:
        form = DocumentForm()
    return save_book_form(request, form, 'docss/includes/partial_docs_create.html')

这是我的 js 文件:

$(function () {
  /* Functions */
  var loadForm = function () {
    var btn = $(this);
    $.ajax({
      url: btn.attr("data-url"),
      type: 'get',
      dataType: 'json',
      beforeSend: function () {
        $("#modal-doc").modal("show");
      },
      success: function (data) {
        $("#modal-doc .modal-content").html(data.html_form);
      }
    });
  };
  var saveForm = function () {
    var form = $(this);
    $.ajax({
      url: form.attr("action"),
      data: form.serialize(),
      type: form.attr("method"),
      dataType: 'json',
      success: function (data) {
        if (data.form_is_valid) {
          $("#doc-table tbody").html(data.html_docs_list);
          $("#modal-doc").modal("hide");
        }
        else {
          $("#modal-doc .modal-content").html(data.html_form);
        }
      }
    });
    return false;
  };
  /* Binding */
  // Create document
  $(".js-add-document").click(loadForm);
  $("#modal-doc").on("submit", ".js-add-document-form", saveForm);
});

一切似乎都工作正常，除了发送表单时，它不包含任何文件。示例:当我做类似的事情时:

print('----->>>>', form.cleaned_data['document']) 我得到None。请帮忙 !我不知道我错了什么。

Answer 1

在 @Hayden 的帮助下进行多次搜索后，我终于找到了解决方案:

我的带有 formData 的上传 js:

$(function () {
  /* Functions */
  /** No change to LodForm **/

  var saveForm = function () {
    var form = $(this);
    var formData = new FormData(form[0]);
    $.ajax({
      url: form.attr("action"),
      data: formData,
      type: form.attr("method"),
      dataType: 'json',
      async: true,
      cache: false,
      contentType: false,
      enctype: form.attr("enctype"),
      processData: false,
      success: function (data) {
        if (data.form_is_valid) {
          $("#doc-table tbody").html(data.html_docs_list);
          $("#modal-doc").modal("hide");
        }
        else {
          $("#modal-doc .modal-content").html(data.html_form);
        }
      }
    });
    return false;
  };
  /* Binding */
  // Create document
  $(".js-add-document").click(loadForm);
  $("#modal-doc").on("submit", ".js-add-document-form", saveForm);
});

它的工作原理就像一个魅力，但还有许多其他解决方案存在，就像这个 page 一样。