使用 Django 使用 Javascript 而不是 HTML 表单通过 POST 发送文件答案

【问题标题】：Sending a file via POST using Django using Javascript instead of HTML Form使用 Django 使用 Javascript 而不是 HTML 表单通过 POST 发送文件
【发布时间】：2018-05-08 21:44:51
【问题描述】：

我有一个保存在变量“报告”中的 PDF 文件。

我正在使用 Django，并希望使用 POST 将其传递给我的 views.py 文件中的函数 --

@xframe_options_exempt
@csrf_exempt
def process_report(request):
    if request.method == 'POST'
         report_file = request.FILES['docfile']
         ....
         return response

如何使用此文件发送 ajax POST 请求？文件类型为 PDF。

我以前使用 HTML 表单来执行此操作，但我想使用 javascript 设置表单上传样式。我尝试使用 javascript 设置按钮的样式（根据上传的文件类型更改颜色和文本），但该文件不再能够通过 POST 请求传递。现在我只是将文件保存在一个 javascript 变量中，并试图通过 POST 传递它而不使用表单。我知道不可能用文件预填充表单。

我的旧代码：

<form id="boring" action="{% url "process_report" %}" method="post" 
    enctype="multipart/form-data">

        {% csrf_token %}
        {{ form.non_field_errors }}
        {{ form.docfile.label_tag }} {{ form.docfile.help_text }                
        {{ form.docfile.errors }}
        {{ form.docfile }}

    </form>

我一直在尝试用 ajax 做什么

var formdata = new FormData(report);
    $.ajax({
      url: 'process_report',
      type: 'POST',
      processData: false,
      contentType: false,
      dataType : 'application/pdf',
      data: {
                'content': 'formdata',
                'csrfmiddlewaretoken': '{{ csrf_token }}',
             }

【问题讨论】：

Django ajax file upload的可能重复

标签： javascript ajax django file upload

【解决方案1】：

我解决了我自己的问题。我最终决定使用 xhr 而不是 ajax，但这里是 ajax 的答案。

首先，我错误地设置了表单数据，因为它应该是这样的

// Set up form data
var formData = new FormData();
formData.append("docfile", report)

其次，需要更新 ajax

// Pass the form to views via POST
$.ajax({
    url: "{% url "process_report" %}",
    type: 'POST',
    data: formData,
    cache: false,
    processData: false, // essential
    contentType: false, // essential, application/pdf doesn't work. 
    enctype: 'multipart/form-data',

    // If sucess, download file
    success: function(data, status, xhr) {
          console.log(data;
    }
});

【讨论】：