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 — DsRaj
– DsRaj, Commented Aug 11, 2016 at 11:35

Haresh Vidja · Accepted Answer · 2016-08-11 12:47:04Z

3

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

answered Aug 11, 2016 at 12:47

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haresh Vidja Over a year ago

Its glad to hear its working.. thanks for mark as correct.. if you like this please up vote it, now you have enough reputation ;)

Balu Abraham · Accepted Answer · 2016-08-11 11:41:13Z

0

( '#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, 2016 at 11:41

Balu Abraham

384 bronze badges

Comments

Anil Tomar · Accepted Answer · 2023-01-25 10:31:32Z

//html form

<form action="url" id="addquestionsamepage" class="form-horizontal form-label-left" method="post" enctype="multipart/form-data" accept-charset="utf-8">        

<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Image </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input  class="form-control col-md-7 col-xs-12"  name="image"  id="add_image" type="file">
    </div>
</div>

</form> 

  

//jquery code

$('#addquestionsamepage').submit(function (e) {
        e.preventDefault();
        var form = $("#addquestionsamepage");
        var url = form.attr('action');
        var formData = new FormData(this);
        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            cache:false,
             contentType: false,
             processData: false,
            success: function (data) {
               alert(data);  
            },
            error: function (data) {
               alert(data);
            }
        });
    });

Collectives™ on Stack Overflow

Ajax Image upload using serialize method

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related