Question

我有一个如下的ajax调用。现在我想将包含文件的数据发布到创建的url / api / create / project。

$(document).ready(function(){
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}


$(".project").submit(function(event){
      event.preventDefault()
      var image_file = document.getElementById('content');
      var myFile = image_file.files[0];
      console.log(myFile);
      var this_ = $(this);
      var form =  this_.serializeArray();
      console.log("form", this_);
      console.log(form);
      var formData =  this_.serialize();

        var temp=

        {
"title": form[1].value,
"project_question_content_url": myfile,
"deadline_date": form[2].value,
"employee": {{ id }},
"course": form[3].value

}

console.log(temp);
      $.ajax({
        url: "/api/project/create",
        data: JSON.stringify(temp),
        beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  },

        method: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function(data){
           console.log(data)


        },
        error: function(data){
          console.log("error")
          console.log(data.statusText)
          console.log(data.status)
        }
      })

    });
    });

现在，如何通过temp变量中的json发送文件？我用rest框架创建了api。另外，出于安全原因我们无法获取文件路径的url。从其余文件上传文件工作正常。请帮助！

Answer 1

我建议您使用像https://github.com/blueimp/jQuery-File-Upload这样的软件包来简化您的体验，而不是在浏览器中使用您自己的文件上传实现。主要问题是您必须处理将文件数据附加到XHR对象，这需要许多步骤。使用上面链接的文件上传器小部件之类的东西可以更容易集成，并包含许多不错的功能。

一旦你在浏览器中使用它，与现有的API集成应该很容易，因为你几乎一直都在那里。

使用ajax上传文件到djangorest api？

1 个答案: