Question

我想通过Ajax调用将FirstName，LastName和Image发送到PHP。我可以不使用图像发送数据，也可以使用formdata发送不带文本的图像，但是问题是我一次不能做这两个事情。请检查我的代码我在做什么错：

<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

您可以通过formdata.append（data）来完成此操作：

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

Answer 2

只需将您的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>

如何在带有图像的Ajax调用中附加formdata？

2 个答案: