AJAX後發送數據序列化和圖像數據

Question

我在AJAX提交表單序列化和我的圖像數據數組中發佈請求中的問題。我怎樣才能做到這一點？

這裏是我的代碼：

我想給這樣的數據：

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

和

$("#editProd").serialize() 

這裏是我做過什麼：data: $("#editProd").serialize()+Imagedata,

我有這樣的作爲全碼：

function ProductAjax(e) { 
    e.preventDefault(); 

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

    $.ajax({   
    url: "{{ route('admin.editProduct') }}",   
    type: "POST", 
    data: $("#editProd").serialize()+Imagedata, 
    dataType: "JSON", 
    success: function(data) { 
     if($.isEmptyObject(data.error)){ 
     $('.print-error-msg-addcat').removeClass('alert alert-danger'); 
     $('.print-error-msg-addcat').addClass('alert alert-success'); 
     $('.print-error-msg-addcat').find("ul").html(''); 
     $('.print-error-msg-addcat').css('display','block'); 
     $(".print-error-msg-addcat ul").append('<li class="tick">'+data.success+'</li>'); 
     $('#frmAddcategory')[0].reset(); 
     location.reload(); 
     }else{ 
     printErrorMsgEditprod(data.error); 
     } 
    } 
    }); 
} 

我做對了嗎？有什麼建議麼？

Answer 1

看代碼和註釋如下：

function ProductAjax(e) { 
    e.preventDefault(); 

    var formData = new FormData($("#editProd")[0]); //assuming this object is a form element. 
    //the FormData object allows a form element to be passed to the constructor. The new instance 
    //will have all the form input fields already appended. 
    //if not a form element you need to append every input seperately using jQuery.serializeArray 

    jQuery.each(jQuery('#addfiles')[0].files, function(i, file) { 
    formData.append('file-'+i, file); 
    }); 


    $.ajax({   
    url: "{{ route('admin.editProduct') }}",   
    type: "POST", 
    data: formData, //send the formData object containing all the form input. 
    dataType: "JSON", 
    success: function(data) { 
     if($.isEmptyObject(data.error)){ 
     $('.print-error-msg-addcat').removeClass('alert alert-danger'); 
     $('.print-error-msg-addcat').addClass('alert alert-success'); 
     $('.print-error-msg-addcat').find("ul").html(''); 
     $('.print-error-msg-addcat').css('display','block'); 
     $(".print-error-msg-addcat ul").append('<li class="tick">'+data.success+'</li>'); 
     $('#frmAddcategory')[0].reset(); 
     location.reload(); 
     }else{ 
     printErrorMsgEditprod(data.error); 
     } 
    } 
    }); 
}