Как добавить FormData в вызове AJAX с изображением в PHP?

Question

Я хочу отправить FirstName, LastName и Image через Ajax Call в PHP. Я могу отправить данные без изображения, и я могу отправить изображение без текста, используя форм-данные, но проблема в том, что я не могу сделать оба одновременно. Пожалуйста, проверьте мой код, что я делаю неправильно:

<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>

В приведенном выше коде, если я комментирую

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

А если я использую в Ajax Call

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

Я не могу одновременно отправлять текстовые данные и изображения в php-файл. Любая идея или предложение будет приветствоваться.

Answer 1

Просто добавьте свои firstname и lastname в formdata. Затем отправьте полный 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>

Answer 2

Вы могли бы просто сделать это вместо formdata.append (data):

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