如何通过 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。 screenshot shows only image object being sent

我们将不胜感激。

Answer 1

您应该在请求中只发送 FormData 对象。要添加 id 参数，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);
});

如何通过 ajax 调用将图像和数据作为两个不同的参数发送？

How to send image and data as two different parameters through ajax call?

javascript

parameters

ajax

jquery

image-uploading