2017-12-28 19 views
0

私は以下のようにajax呼び出しを持っています。今作成したurl/api/create/projectにファイルを含むデータを投稿したいと思います。djangorest APIにajaxを使ってファイルをアップロードしますか?

$(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) 
     } 
     }) 

    }); 
    }); 

は今、どのように一時変数にJSONを通じてファイルを送信するには?私は残りのフレームワークを使用してAPIを作成しました。また、jsのセキュリティ上の理由からファイルパスのURLを取得できません。残りのファイルのアップロードは正常に動作します。 助けてください!

答えて

0

ブラウザでのファイルアップロードに独自の実装を使用するのではなく、https://github.com/blueimp/jQuery-File-Uploadのようなパッケージを使用することをお勧めします。主な問題は、ファイルデータをXHRオブジェクトに添付して処理する必要があることです。これには多くの手順が必要です。上にリンクされたファイルアップローダーウィジェットのようなものを使用すると、統合がはるかに簡単になり、いくつかの素晴らしい機能が含まれています。

ブラウザで作業したら、既存のAPIと統合するのは簡単です

+0

jquery file uploadの使用これは動作しますが、ファイルデータをajaxデータでどのように送信できますか? – nope

+0

あなたはlibがそれをする方法を見ることができます – Jason

+0

ファイルのアップロードはライブラリで動作します..そのためにありがとう!!しかし、私はajaxのポストメソッドを介して送信されたメディアフォルダからのURLは動作しません..任意のアイデア? – nope

関連する問題