javascript - 如何在没有表单数据的情况下使用 AJAX 调用发送文件

Question

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

Answer 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;
}