S.S S.S - 3 months ago 8
Javascript Question

Ajax Image upload using serialize method

Here I have used serialize method to fetch the data but I am not getting image from that please help to find the solution or give me alternative of serialize method.

$( "#button" ).click(function(){
$.ajax({
type: 'POST',
url: ajax_url,
enctype: 'multipart/form-data',
data:{

data_array:$( "#form" ).serialize(),
action: 'product_add_form_submit'
},
success: function (data) {
alert('Successfully Submitted');
}
});
});

Answer

You can upload Form fields with file as mentioned below, and follow comment.

$('#my-form').submit( function( e ) {
    form_data= new FormData($(this)[0]);
    var imgFile = $("file_input_selector")[0]; // change your delector here
    form_data.append("file_name_field", imgFile.files[0]); // change filename field here
    $.ajax({
        url: 'http://host.com/action/',
        type: 'POST',
        data: form_data,
        success: function(data){
            alert(data);
        }
    });
    e.preventDefault();
});