How to use FormData for AJAX file upload

Question

This is my HTML which I m generating dynamically using drag and drop functionality   lt form method  quot POST quot  id  quot contact quot  name  quot 13 quot  class  quot form-horizontal wpc contact quot  novalidate  quot novalidate quot  enctype  quot multipart form-data quot  gt   lt fieldset gt       lt div id  quot legend quot  class  quot  quot  gt           lt legend class  quot  quot  gt file demoe 1 lt  legend gt           lt div id  quot alert-message quot  class  quot alert hidden quot  gt  lt  div gt       lt  div gt        lt div class  quot control-group quot  gt           lt  -- Text input-- gt           lt label class  quot control-label quot  for  quot input01 quot  gt Text input lt  label gt           lt div class  quot controls quot  gt               lt input type  quot text quot  placeholder  quot placeholder quot  class  quot input-xlarge quot  name  quot name quot  gt               lt p class  quot help-block quot  style  quot display none  quot  gt text input lt  p gt           lt  div gt           lt div class  quot control-group quot  gt    lt  div gt           lt label class  quot control-label quot  gt File Button lt  label gt            lt  -- File Upload -- gt            lt div class  quot controls quot  gt               lt input class  quot input-file quot  id  quot fileInput quot  type  quot file quot  name  quot file quot  gt           lt  div gt       lt  div gt       lt div class  quot control-group quot  gt                lt  -- Button -- gt            lt div class  quot controls quot  gt               lt button class  quot btn btn-success quot  gt Button lt  button gt           lt  div gt       lt  div gt   lt  fieldset gt   lt  form gt    This is my JavaScript code   lt script gt          wpc contact   submit function event           var formname       wpc contact   attr  name            var form       wpc contact   serialize                           var FormData   new FormData   form  1               ajax               url     lt  php echo plugins url      gt     wpc-contact-form resources js tinymce php               data    form form formname formname ipadd ipadd FormData FormData               type    POST               processData  false              contentType  false              success   function data               alert data

User · Answer

I can t add a comment above as I do not have enough reputation  but the above answer was nearly perfect for me  except I had to add   type   POST    to the  ajax call  I was scratching my head for a few minutes trying to figure out what I had done wrong  that s all it needed and works a treat  So this is the whole snippet   Full credit to the answer above me  this is just a small tweak to that  This is just in case anyone else gets stuck and can t see the obvious       ajax       url   Your url here       data  formData      type   POST     ADDED THIS LINE        THIS MUST BE DONE FOR FILE UPLOADING     contentType  false      processData  false             Other options like success and etc

User · Answer

form-withdraw   submit function event           prevent the form from submitting by default     event preventDefault           var formData   new FormData   this  0           ajax           url   function ajax topup php           type   POST           data  formData          async  false          cache  false          contentType  false          processData  false          success  function  returndata              if returndata     success                           swal                 title   Great                 text   Your Form has Been Transfer  We will comfirm the amount you reload in 3 hours                 type   success                 showCancelButton  false                confirmButtonColor    DD6B55                 confirmButtonText   OK                 closeOnConfirm  false                            function                  window location href     transaction php                                          else if returndata     Offline                             sweetAlert  Offline    Please use other payment method    error

User · Answer

lt form id  upload form  enctype  multipart form-data  gt    jQuery with CodeIgniter file upload   var formData   new FormData     upload form   0     formData append  tax file      input type file    0  files 0       ajax       type   POST       url  base url    member upload        data  formData        use contentType  processData for sure      contentType  false      processData  false      beforeSend  function                 modal  ajax data   prepend   lt img src                  base url                 asset images ajax-loader gif    gt                   modal  ajax data   html   lt pre gt Hold on    lt  pre gt                 modal   modal  show               success  function msg                modal  ajax data   html   lt pre gt     msg                 lt  pre gt                 close   hide               error  function                 modal  ajax data   html                lt pre gt Sorry  Couldn t process your request  lt  pre gt                              done   hide                you can use    var form      form   0    var formData   new FormData form        formData append  tax file      input type file    0  files 0      or   var formData   new FormData     upload form   0    formData append  tax file      input type file    0  files 0       Both will work

User · Answer

Actually The documentation shows that you can use XMLHttpRequest   send   to simply send  multiform data  in case jquery sucks

User · Answer

For correct form data usage you need to do 2 steps    Preparations  You can give your whole form to FormData   for processing  var form      form   0      You need to use standard javascript object here var formData   new FormData form     or specify exact data for FormData    var formData   new FormData    formData append  section    general    formData append  action    previewImg       Attach file formData append  image      input type file    0  files 0       Sending form  Ajax request with jquery will looks like this     ajax       url   Your url here       data  formData      type   POST       contentType  false     NEEDED  DON T OMIT THIS  requires jQuery 1 6       processData  false     NEEDED  DON T OMIT THIS            Other options like success and etc       After this it will send ajax request like you submit regular form with enctype  multipart form-data   Update  This request cannot work without type  POST  in options since all files must be sent via POST request     Note   contentType  false only available from jQuery 1 6 onwards

User · Answer

document  ready function              submit btn   click function  event            event preventDefault            var form       fileUploadForm   0           var data   new FormData form           data append  CustomField    This is some extra data  testing                btnSubmit   prop  disabled   true             ajax               type   POST               enctype   multipart form-data               url   upload php               data  data              processData  false              contentType  false              cache  false              timeout  600000              success  function  data                    console log

User · Answer

View   lt label class  btn btn-info btn-file  gt  Import  lt input type  file  style  display  none   gt   lt  label gt   lt Script gt    document  ready function                        document  on  change     file   function                          var fileUpload     this  get 0                       var files   fileUpload files                      var bid   0                      if  files length    0                            var data   new FormData                            for  var i   0  i  lt  files length   i                                  data append files i  name  files i                                                        ajax                               xhr  function                                      var xhr     ajaxSettings xhr                                    xhr upload onprogress   function  e                                        console log Math floor e loaded   e total   100                                                                             return xhr                                                             contentType  false                              processData  false                              type   POST                               data  data                              url    ControllerX     bid                              success  function  response                                    location href    xxx Index                                                                                                                         lt  Script gt  Controller   HttpPost          public ActionResult ControllerX string id                        var files   Request Form Files

User · Answer

Better to use the native javascript to find the element by id like  document getElementById  yourFormElementID       ajax          url   http   yourlocationtopost          type   POST         data  new FormData document getElementById  yourFormElementID           processData  false        contentType  false         done function d               console log  done

User · Answer

Good morning   I was have the same problem with upload of multiple images  Solution was more simple than I had imagined  include    in the name field    lt input type  file  name  files    multiple gt    I did not make any modification on FormData

[javascript] How to use FormData for AJAX file upload?

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to file-upload