使用Ajax上传时缺少Django文件

时间:2018-09-11 10:45:34

标签: jquery ajax django python-3.x django-forms

我致力于Django项目(V2.1 + python 3.6)上传文本文件。 我有一个要上传的文件的模板,除了发送表单时文件丢失;我不知道怎么了。

那是我的模型:

queue.Count < maxQueueCount

这是我的模板:

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>

那是我的js文件:

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')

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

$(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'])。 请帮忙 !我不知道我在做什么。

2 个答案:

答案 0 :(得分:1)

jQuery form.serialize()函数无法对多部分主体进行编码,我建议使用FormData API

答案 1 :(得分: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