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

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

<form name="form" id="form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]"multiple>
<input type="button" name="submit" value="upload" id="upload">

this php code file

<?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] . '<br>';
}
else {
    $i = 0;
    for ($i = 0; $i < $count; $i++) { 
        move_uploaded_file($_FILES['arr']['tmp_name'][$i], 'uploads/' . $_FILES['arr']['name'][$i]);
    }

}
?>

I hope people with same problem , can fast solve this problem. i got headache because multiple upload image.

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

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

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

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

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

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