Send FormData and String Data Together Through JQuery AJAX

Question

How can I post file and input string data with FormData    For instance  I have many other hidden input data that I need them to be sent to the server   html    lt form action  image php  method  post  enctype  multipart form-data  gt   lt input type  file  name  file    multiple      gt   lt input type  hidden  name  page id  value   lt  php echo  page id   gt    gt   lt input type  hidden  name  category id  value   lt  php echo  item category- gt category id   gt    gt   lt input type  hidden  name  method  value  upload   gt   lt input type  hidden  name  required category id   value  Category ID   gt   lt  form gt    With this code below I only manage to send the file data but not the hidden input data   jquery      HTML5 form data object  var fd   new FormData     var file data   object get 0  files i   var other data      form   serialize       page id  amp category id 15 amp method upload amp required 5Bcategory id 5D Category ID  fd append  file   file data      ajax       url   add php       data  fd      contentType  false      processData  false      type   POST       success  function data           alert data               server php  print r   FILES   print r   POST     result   Array        file    gt  Array                        name    gt  xxx doc              type    gt  application msword              tmp name    gt  C  wamp tmp php7C24 tmp              error    gt  0              size    gt  11776                I would like to get this as my result though   Array        file    gt  Array                        name    gt  xxx doc              type    gt  application msword              tmp name    gt  C  wamp tmp php7C24 tmp              error    gt  0              size    gt  11776               Array        page id    gt  1000      category id    gt  12      method    gt  upload             Is it possible

User · Answer

For multiple files in ajax try this

        var url = "your_url";
        var data = $('#form').serialize();
        var form_data = new FormData(); 
        //get the length of file inputs   
        var length = $('input[type="file"]').length; 

        for(var i = 0;i<length;i++){
           file_data = $('input[type="file"]')[i].files;

            form_data.append("file_"+i, file_data[0]);
        }

            // for other data
            form_data.append("data",data);


        $.ajax({
                url: url,
                type: "POST",
                data: form_data,
                cache: false,
                contentType: false, //important
                processData: false, //important
                success: function (data) {
                  //do something
                }
        })

In php

        parse_str($_POST['data'], $_POST); 
        for($i=0;$i<count($_FILES);$i++){
              if(isset($_FILES['file_'.$i])){
                   $file = $_FILES['file_'.$i];
                   $file_name = $file['name'];
                   $file_type = $file ['type'];
                   $file_size = $file ['size'];
                   $file_path = $file ['tmp_name'];
              }
        }

User · Answer

well  as an easier alternative and shorter  you could do this too     var fd   new FormData     var file data   object get 0  files i   var other data      form   serialize      page id  amp category id 15 amp method upload amp required 5Bcategory id 5D Category ID  fd append  file   file data      ajax       url   add php    other data      lt    just add it to the end of url         data  fd      contentType  false      processData  false      type   POST       success  function data           alert data

User · Answer

I try to contribute my code collaboration with my friend   modification from this forum       upload   on  click   function                 var fd   new FormData                  var c 0                var file data arr                   input type  file     each function                      file data      input type  file     c  files     get multiple files from input file                   console log file data                  for var i   0 i lt file data length i                        fd append  arr     file data i       we can put more than 1 image file                                c                                      ajax                      url   test php                      data  fd                     contentType  false                     processData  false                     type   POST                      success  function data                          console log data                                                            this my html file   lt form name  form  id  form  method  post  enctype  multipart form-data  gt   lt input type  file  name  file   multiple gt   lt input type  button  name  submit  value  upload  id  upload  gt      this php code file   lt  php   count   count   FILES  arr    name        arr from fd append  arr     var dump  count   echo  count  var dump   FILES  arr      if    count    0        echo  Error        FILES  arr    error   0      lt br gt      else        i   0      for   i   0   i  lt   count   i               move uploaded file   FILES  arr    tmp name    i    uploads       FILES  arr    name    i               gt    I hope people with same problem   can fast solve this problem  i got headache because multiple upload image

User · Answer

var fd   new FormData    var file data      input type  file     0  files     for multiple files for var i   0 i lt file data length i         fd append  file   i  file data i      var other data      form   serializeArray      each other data function key input       fd append input name input value         ajax       url   test php       data  fd      contentType  false      processData  false      type   POST       success  function data           console log data               Added a for loop and changed  serialize   to  serializeArray   for object reference in a  each   to append to the FormData

User · Answer

For Multiple file input    Try this code       lt form name  form  id  form  method  post  enctype  multipart form-data  gt       lt input type  file  name  file    gt       lt input type  file  name  file     gt       lt input type  text  name  name  id  name  gt       lt input type  text  name  name1  id  name1  gt       lt input type  button  name  submit  value  upload  id  upload  gt    lt  form gt         upload   on  click   function       var fd   new FormData        var c 0      var file data         input type  file     each function            file data      input type  file     c  files     for multiple files       for var i   0 i lt file data length i              fd append  file   c  file data i               c               var other data      form   serializeArray           each other data function key input            fd append input name input value                   ajax            url   work php            data  fd           contentType  false           processData  false           type   POST            success  function data                console log data

User · Answer

You can try this   var fd   new FormData    var data                    lt ---------------declare array here var file data   object get 0  files i   var other data      form   serialize     data push file data       lt ----------------push the data here data push other data      lt ----------------and this data too  fd append  file   data       lt ---------then append this data

User · Answer

I always use this It send form data using ajax    document  on  submit    form   function event        event preventDefault         var url   this  attr  action          ajax           url  url          type   POST                       data  new FormData this           processData  false          contentType  false          success  function  data  status

User · Answer

I found that  if somehow like your ModelState is false on server   and page post again to server then it was taking old value to the server  So i found that solution for that      var data   new FormData         each  form serializeArray    function  key  input            if  data has input name                 data set input name  input value             else               data append input name  input value

User · Answer

var fd   new FormData          Get Form Values     var other data       form1   serializeArray          each other data  function  key  input         fd append input name  input value                    Get File Value       var  file   jq   photoUpload   get 0         if   file files length  gt  0          for  var i   0  i  lt   file files length  i            fd append  Photograph    i   file files i                      ajax       url   test php       data  fd      contentType  false      processData  false      type   POST       success  function data           console log data

User · Answer

From what I understand you would like to send the images and the values of the inputs together  This code works well for me  I hope it helps someone in the future    lt form id  my-form  method  post  enctype  multipart form-data  gt   lt input type  file  name  file    multiple      gt   lt input type  hidden  name  page id  value   lt  php echo  page id   gt    gt   lt input type  hidden  name  category id  value   lt  php echo  item category- gt category id   gt    gt   lt input type  hidden  name  method  value  upload   gt   lt input type  hidden  name  required category id   value  Category ID   gt   lt  form gt    -  jQuery ajax   url   post php   data  new FormData     my-form   0    cache  false  contentType  false  processData  false  type   POST   success  function data       console log data          Take a look at my short code for ajax multiple upload with preview    https   santanamic github io ajax-multiple-upload

[javascript] Send FormData and String Data Together Through JQuery AJAX?

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to form-data