Ajaxリクエスト画像

Question

画像を含むAJAXリクエストを作成したいと思います。イメージはフォーム内にあり、イメージだけである必要があります。

var form = $('form')[0]; // You need to use standard javascript object here 
var formData = new FormData(form); 

var data = { 
    id: id, 
    title:title, 
    photo:formdata 
}; 

$.ajax({ 
    type: 'POST', 
    enctype: 'multipart/form-data', 
    url: '/my-url', 
    data: JSON.stringify(data), 
    processData: false, 
    cache: false, 
    contentType: false, 
    success: function(response){ 
    console.log(response); 
    }, 
    error: function(data){ 
    console.log("error"); 
    console.log(data); 
    } 
}) 

私は.val();でidとタイトルを取得していますし、私はこれを維持したい...、それはidとタイトルのために正常に動作していますが、私は、データベースに画像を送信するために仕事をするか見当がつかない。

Answer 1

問題は、バイナリFormDataをオブジェクトに追加してからシリアル化するためです。

代わりに、追加のデータをFormDataオブジェクトに追加して、すべて同じ方法でエンコードできるようにする必要があります。これを試してみてください：

var form = $('form')[0]; 
var formData = new FormData(form); 

formData.append('title', title); 
formData.append('id', id); 

$.ajax({ 
    type: 'POST', 
    enctype: 'multipart/form-data', 
    url: '/my-url', 
    data: formData, 
    processData: false, 
    cache: false, 
    contentType: false, 
    success: function(response) { 
    console.log(response); 
    }, 
    error: function(data){ 
    console.log("error"); 
    console.log(data); 
    } 
}) 

idとtitle値はform内inputの要素から取得される場合は、提供され、彼らは自動的にFormDataに含まれますように、そしてあなたも、append()ラインを必要としないことを注意formをコンストラクタに渡します。

form要素のsubmitイベントの下でこのコードを実行し、preventDefaultを呼び出してください。これをsubmitボタンの下に置かないでください。