Sending multipart formdata with jQuery ajax

Question

I ve got a problem sending a file to a serverside PHP-script using jQuery s ajax-function  It s possible to get the File-List with     fileinput   attr  files   but how is it possible to send this Data to the server  The resulting array    POST  on the serverside php-script is 0  NULL  when using the file-input   I know it is possible  though I didn t find any jQuery solutions until now  only Prototye code  http   webreflection blogspot com 2009 03 safari-4-multiple-upload-with-progress html     This seems to be relatively new  so please do not mention file upload would be impossible via XHR Ajax  because it s definitely working   I need the functionality in Safari 5  FF and Chrome would be nice but are not essential   My code for now is     ajax       url   php upload php       data      file   attr  files        cache  false      contentType   multipart form-data       processData  false      type   POST       success  function data           alert data

User · Answer

Nowadays you don t even need jQuery   fetch API support table  let result   fetch  url    method   POST   body  new FormData document querySelector   form

User · Answer

I just built this function based on some info I read   Use it like using  serialize    instead just put  serializefiles     Working here in my tests     USAGE      form   serializefiles     function        fn serializefiles   function         var obj     this          ADD FILE TO PARAM AJAX        var formData   new FormData          each   obj  find  input type  file      function i  tag              each   tag  0  files  function i  file                formData append tag name  file                           var params     obj  serializeArray          each params  function  i  val            formData append val name  val value               return formData        jQuery

User · Answer

One gotcha I ran into today I think is worth pointing out related to this problem  if the url for the ajax call is redirected then the header for content-type   multipart form-data  can be lost   For example  I was posting to http   server com context param x  In the network tab of Chrome I saw the correct multipart header for this request but then a 302 redirect to http   server com context  param x  note the slash after context   During the redirect the multipart header was lost   Ensure requests are not being redirected if these solutions are not working for you

User · Answer

Look at my code  it does the job for me       formId       submit  function  e           ajax          url   FormSubmitUrl         type   POST         data  new FormData  this          processData  false        contentType  false              e preventDefault

User · Answer

Older versions of IE do not support FormData   Full browser support list for FormData is here  https   developer mozilla org en-US docs Web API FormData    Either you can use a jquery plugin  For ex  http   malsup com jquery form  code-samples   or  you can use IFrame based solution to post multipart form data through ajax  https   developer mozilla org en-US docs Learn HTML Forms Sending forms through JavaScript

User · Answer

Starting with Safari 5 Firefox 4  it   s easiest to use the FormData class   var data   new FormData    jQuery each jQuery   file   0  files  function i  file        data append  file-  i  file         So now you have a FormData object  ready to be sent along with the XMLHttpRequest   jQuery ajax       url   php upload php       data  data      cache  false      contentType  false      processData  false      method   POST       type   POST      For jQuery  lt  1 9     success  function data           alert data               It   s imperative that you set the contentType option to false  forcing jQuery not to add a Content-Type header for you  otherwise  the boundary string will be missing from it  Also  you must leave the processData flag set to false  otherwise  jQuery will try to convert your FormData into a string  which will fail   You may now retrieve the file in PHP using     FILES  file-0      There is only one file  file-0  unless you specified the multiple attribute on your file input  in which case  the numbers will increment with each file    Using the FormData emulation for older browsers  var opts         url   php upload php       data  data      cache  false      contentType  false      processData  false      method   POST       type   POST      For jQuery  lt  1 9     success  function data           alert data            if data fake           Make sure no text encoding stuff is done by xhr     opts xhr   function     var xhr   jQuery ajaxSettings xhr    xhr send   xhr sendAsBinary  return xhr        opts contentType    multipart form-data  boundary   data boundary      opts data   data toString      jQuery ajax opts     Create FormData from an existing form  Instead of manually iterating the files  the FormData object can also be created with the contents of an existing form object   var data   new FormData jQuery  form   0      Use a PHP native array instead of a counter  Just name your file elements the same and end the name in brackets   jQuery each jQuery   file   0  files  function i  file        data append  file     file           FILES  file   will then be an array containing the file upload fields for every file uploaded  I actually recommend this over my initial solution as it   s simpler to iterate over

User · Answer

get form object by jquery-       id   0  data   new FormData     id   0    ok data is your want

User · Answer

Just wanted to add a bit to Raphael s great answer  Here s how to get PHP to produce the same   FILES  regardless of whether you use JavaScript to submit   HTML form    lt form enctype  multipart form-data  action   test php   method  post  class  putImages  gt      lt input name  media    type  file  multiple  gt      lt input class  button  type  submit  alt  Upload  value  Upload    gt   lt  form gt    PHP produces this   FILES  when submitted without JavaScript   Array        media    gt  Array                        name    gt  Array                                        0    gt  Galata Tower jpg                      1    gt  518f jpg                                 type    gt  Array                                        0    gt  image jpeg                      1    gt  image jpeg                                 tmp name    gt  Array                                        0    gt   tmp phpIQaOYo                      1    gt   tmp phpJQaOYo                                 error    gt  Array                                        0    gt  0                      1    gt  0                                 size    gt  Array                                        0    gt  258004                      1    gt  127884                                   If you do progressive enhancement  using Raphael s JS to submit the files     var data   new FormData    input name   media            jQuery each    input name   media     0  files  function i  file        data append i  file          ajax       type  ppiFormMethod      data  data      url  ppiFormActionURL      cache  false      contentType  false      processData  false      success  function data           alert data                   this is what PHP s   FILES array looks like  after using that JavaScript to submit   Array        0    gt  Array                        name    gt  Galata Tower jpg              type    gt  image jpeg              tmp name    gt   tmp phpAQaOYo              error    gt  0              size    gt  258004                 1    gt  Array                        name    gt  518f jpg              type    gt  image jpeg              tmp name    gt   tmp phpBQaOYo              error    gt  0              size    gt  127884                That s a nice array  and actually what some people transform   FILES into  but I find it s useful to work with the same   FILES  regardless if JavaScript was used to submit   So  here are some minor changes to the JS      match anything not a   or   regexp               var fileInput       putImages input type  file      var fileInputName   regexp exec  fileInput attr  name          make files available var data   new FormData    jQuery each   fileInput  0  files  function i  file        data append fileInputName     i      file          14 April 2017 edit  I removed the form element from the constructor of FormData   -- that fixed this code in Safari    That code does two things    Retrieves the input name attribute automatically  making the HTML more maintainable  Now  as long as form has the class putImages  everything else is taken care of automatically  That is  the input need not have any special name  The array format that normal HTML submits is recreated by the JavaScript in the data append line   Note the brackets    With these changes  submitting with JavaScript now produces precisely the same   FILES array as submitting with simple HTML

User · Answer

If your form is defined in your HTML  it is easier to pass the form into the constructor than it is to iterate and add images       my-form   submit  function e        e preventDefault         var data   new FormData this       lt --  this  is your form element        ajax               url    my URL                data  data              cache  false              contentType  false              processData  false              type   POST                    success  function data

User · Answer

All the solutions above are looks good and elegant  but the FormData   object does not expect any parameter  but use append   after instantiate it  like what one wrote above   formData append val name  val value

User · Answer

If the file input name indicates an array and flags multiple  and you parse the entire form with FormData  it is not necessary to iteratively append   the input files  FormData will automatically handle multiple files    x000D   x000D      submit 1   on  click   function     x000D    let data   new FormData     my form   0    x000D   x000D      ajax   x000D      url    path to php file   x000D      type   POST   x000D      data  data  x000D      processData  false  x000D      contentType  false  x000D      success  function r    x000D        console log  success   r   x000D         x000D      error  function r    x000D        console log  error   r   x000D        x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt form id  my form  gt  x000D     lt input type  file  name  multi img file    id  multi img file  accept   gif  jpg  jpeg  png  svg  multiple  multiple    gt  x000D     lt button type  button  name  submit 1  id  submit 1  gt Not type  submit  lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    Note that a regular button type  button  is used  not type  submit   This shows there is no dependency on using submit to get this functionality   The resulting   FILES entry is like this in Chrome dev tools   multi img file    error   2   0  0    name   2    pic1 jpg    pic2 jpg     size   2   1978036  2446180    tmp name   2     tmp phphnrdPz     tmp phpBrGSZN     type   2    image jpeg    image jpeg     Note  There are cases where some images will upload just fine when uploaded as a single file  but they will fail when uploaded in a set of multiple files  The symptom is that PHP reports empty   POST and   FILES without AJAX throwing any errors  Issue occurs with Chrome 75 0 3770 100 and PHP 7 0  Only seems to happen with 1 out of several dozen images in my test set

User · Answer

Devin Venable s answer was close to what I wanted  but I wanted one that would work on multiple forms  and use the action already specified in the form so that each file would go to the right place   I also wanted to use jQuery s on   method so I could avoid using  ready     That got me to this    replace formSelector with your jQuery selector     document  on  submit   formSelecter  function  e             e preventDefault          ajax            url    this  attr  action            type   POST           data  new FormData  this            processData  false          contentType  false        done function  data               do stuff with the data you got back

User · Answer

The FormData class does work  however in iOS Safari  on the iPhone at least  I wasn t able to use Raphael Schweikert s solution as is   Mozilla Dev has a nice page on manipulating FormData objects   So  add an empty form somewhere in your page  specifying the enctype    lt form enctype  multipart form-data  method  post  name  fileinfo  id  fileinfo  gt  lt  form gt    Then  create FormData object as   var data   new FormData     fileinfo       and proceed as in Raphael s code

[jquery] Sending multipart/formdata with jQuery.ajax

Examples related to jquery

Examples related to ajax

Examples related to file-upload

Examples related to multipartform-data

Examples related to form-data