如何通過ajax調用將圖像和數據作為兩個不同的參數發送？

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。 但是，每當我嘗試使用以上代碼時，僅發送圖像對象。 我還需要發送ID。 屏幕截圖顯示僅圖像對象正在發送

快速幫助將不勝感激。

Answer 1

您應該僅在請求中發送FormData對象。 要添加id參數，請像對待文件一樣append()其append()到FormData ：

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 2

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"
})

Answer 3

提交多部分表格以上傳文件

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