画像とデータをajax呼び出しで2つの異なるパラメータとして送信する方法は？

Question

var data = new FormData() 
jQuery.each(jQuery('#file')[0].files, function(i, file){ 
    data.append('file-'+i, file) 
})  
$.ajax({ 
    method : 'post', 
    url : SERVER, 
    processData : false, 
    contentType : false, 
    //async : false, 
    data : { id: "2458" , file : data }, 
    success : function(response){ 
    if(response.success==1){ 
     //do something 
    } 
    } 
}); 

イメージファイルとIDをパラメータとして受け入れるサードパーティのAPIにイメージをアップロードする必要があります。しかし、上記のコードを使用しようとすると、画像オブジェクトのみが送信されます。私はイデも送信する必要があります。 screenshot shows only image object being sent

クイックヘルプは高く評価されます。

Answer 1

をファイルのマルチパートフォームを送信すると、私はこの方法を試してみましたが、API

<form id="myForm" enctype="multipart/form-data"> 
    <input type="file" name="firstFile" id="file_1" data-filename="image.jpg"> 
    <input type="file" name="SecondFile" id="file_2" data-filename="image2.jpg"> 
    <button id="myFormButton">click</button> 
</form> 
var formData = new FormData(); 

$("#myFormButton").on("click", function (e) { 
    e.preventDefault(); 
    var inputs = $("#myForm input"); 
    $.each(inputs, function (obj, v) { 
     var file = v.files[0]; 
     var filename = $(v).attr("data-filename"); 
     var name = $(v).attr("id"); 
     formData.append(name, file, filename); 
    }); 
    var xhr = new XMLHttpRequest; 
    xhr.open('POST', 'your server URL', true); 
    xhr.send(formData); 
}); 

Answer 2

要求にFormDataオブジェクトのみを送信する必要があります。それはあなたがファイルとまったく同じようFormDataにappend()、idパラメータを追加するには：

var data = new FormData() 
$.each(jQuery('#file')[0].files, function(i, file){ 
    data.append('file-' + i, file) 
})  
data.append('id', '2458'); 

$.ajax({ 
    method: 'post', 
    url: SERVER, 
    processData: false, 
    contentType: false, 
    data: data, 
    success: function(response) { 
    if (response.success == 1) { // you should change the success flag to a boolean 
     //do something 
    } 
    } 
}); 

Answer 3

var imageDetails = {}; 

FR.onload = function(e) { 
    $('#img'+imageIndex).attr("src", e.target.result); 
    $('#imageHolder'+imageIndex).attr('value', e.target.result); 
    imageDetails.images[expectedFile.replace(/\. [^/.]+$/, "")]=(e.target.result); 
}    

FR.readAsDataURL(target.files[0]); 

jqxhr = $.ajax({ 
    'url':"https://url", 
    'data': JSON.stringify(imageDetails), 
    'type':'post', 
    'contentType': "application/json" 
})