how to append formdata in ajax call with image in php?

Question

I want to send FirstName, LastName and Image through Ajax Call to PHP. I am able to send the data without image, and I am able to send the image without text using formdata but the problem is I am not able to do both at a time. Kindly check my code what I am doing wrong:

<script>
 function createBasicInfo() {

  // For Image Send
  var formdata = new FormData();
  var file = jQuery('#photo').prop('files')[0];
  formdata.append('photo', file);

 // For Text Send
 var data = {
  'firstname'       : jQuery('#firstname').val(),
  'lastname'     : jQuery('#lastname').val(),
  };


 **//Here Is the Problem, I am not able to append the data with Text**
 formdata.append(data);



//Ajax call Start Here
jQuery.ajax({
    url: '/adminseller/parsers/sbasicinfo.php',
    method: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    data: formdata,
    success: function(data) {
        if (data != 'passed') {
            jQuery('#modal_errors_1').html(data);
        }
        if (data == 'passed') {
            jQuery('#modal_errors_1').html("");
            location.reload();
        }
    },
    error: function() {
        alert("Something went wrong.");
    },
   });
  } 
</script>

In above code if I comment

//formdata.append(data);  // Then only image will send to php

And If I use in Ajax Call

        data: data, // Then only FirstName & LastName will send to php without Image

I am not able to send text data and image both at the same time to php file. Any idea or suggestion would be welcome.

see https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax — Evgeniy Belov, Nov 08 '18 at 05:57

score 0 · Answer 1 · answered Nov 08 '18 at 04:52

0

You could just do this insted of formdata.append(data):

formdata.firstname = jQuery('#firstname').val();
formdata.lastname = jQuery('#lastname').val();

answered Nov 08 '18 at 04:52

Rikard

191
1
6

score 0 · Answer 2 · answered Nov 08 '18 at 04:59

Just append your firstname and lastname into formdata. Then send full formdata.

<script>
function createBasicInfo() {

    var formdata = new FormData();
    var file = jQuery('#photo').prop('files')[0];
    formdata.append('photo', file);
    formdata.append('firstname', jQuery('#firstname').val());
    formdata.append('lastname', jQuery('#lastname').val());

    //Ajax call Start Here
    jQuery.ajax({
        url: '/adminseller/parsers/sbasicinfo.php',
        method: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        data: formdata,
        success: function(data) {
            // ...
            // ...
        },
        error: function() {
            alert("Something went wrong.");
        },
    });
}
</script>

how to append formdata in ajax call with image in php?

2 Answers2