Ajax Image upload using serialize method

Question

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

I think this link can help [http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax](http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) — DsRaj, Aug 11 '16 at 11:35

score 3 · Accepted Answer · answered Aug 11 '16 at 12:47

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

Its glad to hear its working.. thanks for mark as correct.. if you like this please up vote it, now you have enough reputation ;) — Haresh Vidja, Aug 12 '16 at 05:58

score 1 · Answer 2 · answered Aug 11 '16 at 11:41

1

( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

answered Aug 11 '16 at 11:41

Balu Abraham

42
4

Ajax Image upload using serialize method

2 Answers2