如何使用没有表单数据的 AJAX 调用发送文件答案

【问题标题】：How to send a file using AJAX call without form data如何使用没有表单数据的 AJAX 调用发送文件
【发布时间】：2016-11-07 15:51:17
【问题描述】：

我需要从 ajax 发送一个 PDF 文件来调用 Django 服务器，没有表单数据

【问题讨论】：

标签： javascript jquery ajax django

【解决方案1】：

您可以将文件作为原始文件缓冲区发送，如下所示：

var input = $('#input');

input.change(function(event) {
  var file = this.files[0];
  if (!file) return;

  return $.ajax({
    url: '/django-route', // your route to process the file
    type: 'POST', //
    data: file,
    processData: false,
    contentType: 'application/octet-stream', // set Content-Type header
    success: function(respnse) {
      // do something
    },
    error: function(xhr, textStatus, errorThrown) {
      // do something else
    }
  });
});

如果您需要跟踪文件上传的进度，请将xhr 添加到$.ajax() 选项：

xhr: function() {
  var xhr = new window.XMLHttpRequest();
  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var progress = Math.floor(10000 * event.loaded / event.total) / 10000;
      console.log(progress); // 0.2536 (25.36%)
    }
  }, false);
  xhr.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var progress = Math.floor(10000 * event.loaded / event.total) / 10000;
      console.log(progress);
    }
  }, false);
  return xhr;
}

【讨论】：

不..我没有在 request.FILES 中获取文件。它显示为空。请检查您的最终 (Pdb) request.FILES
由于问题是特定于 js 的（不是特定于 django），因此答案是完全有效的。你没有得到任何文件，因为我猜 django 文件解析器中间件默认配置为接受 application/x-www-form-urlencoded 或 multipart/form-data 请求。检查response.body，缓冲区应该在那里。

【解决方案2】：

我在使用 Django（特别是 rest 框架）时遇到的一个问题是 Parser 类。如果您想发送八位字节流，请使用解析器类：

class StreamParser(BaseParser):
    media_type = 'octet-stream'
    def parse(self, stream, media_type=None, parser_context=None):
        return stream.read()

然后在你的视图类上：

class ExampleView(APIView):
"""
A view that can accept POST requests with JSON content.
"""
parser_classes = [StreamParser]

def post(self, request, format=None):
    return Response({'received data': request.data})

最后不要忘记在settings.py 中包含django restframework 和以下条目：

REST_FRAMEWORK = {
    'DEFAULT_PARSER_CLASSES': [
        'rest_framework.parsers.JSONParser',
     ]
}

全部解释here。

希望对你有帮助！

【讨论】：