Uploading both data and files in one form using Ajax

Question

I m using jQuery and Ajax for my forms to submit data and files but I m not sure how to send both data and files in one form   I currently do almost the same with both methods but the way in which the data is gathered into an array is different  the data uses  serialize    but the files use   new FormData   this  0     Is it possible to combine both methods to be able to upload files and data in one form through Ajax   Data jQuery  Ajax and html     form data   submit function         var formData     this  serialize           ajax           url  window location pathname          type   POST           data  formData          async  false          success  function  data                alert data                     cache  false          contentType  false          processData  false              return false        lt form id  data  method  post  gt       lt input type  text  name  first  value  Bob    gt       lt input type  text  name  middle  value  James    gt       lt input type  text  name  last  value  Smith    gt       lt button gt Submit lt  button gt   lt  form gt    Files jQuery  Ajax and html     form files   submit function         var formData   new FormData   this  0           ajax           url  window location pathname          type   POST           data  formData          async  false          success  function  data                alert data                     cache  false          contentType  false          processData  false              return false        lt form id  files  method  post  enctype  multipart form-data  gt       lt input name  image  type  file    gt       lt button gt Submit lt  button gt   lt  form gt    How can I combine the above so that I can send data and files in one form via Ajax   My aim is to be able to send all of this form in one post with Ajax  is it possible    lt form id  datafiles  method  post  enctype  multipart form-data  gt       lt input type  text  name  first  value  Bob    gt       lt input type  text  name  middle  value  James    gt       lt input type  text  name  last  value  Smith    gt       lt input name  image  type  file    gt       lt button gt Submit lt  button gt   lt  form gt

User · Accepted Answer

The problem I had was using the wrong jQuery identifier.

You can upload data and files with one form using ajax.

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Short Version

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

User · Answer

you can just append them on your formdata  add your files and datas in it you can read this   https   developer mozilla org en-US docs Web API FormData append for better understanding  you can separately retrieve them   FILES for your files and   POST for your data

User · Answer

In my case I had to make a POST request  which had information sent through the header  and also a file sent using a FormData object    I made it work using a combination of some of the answers here  so basically what ended up working was having this five lines in my Ajax request    contentType   application octet-stream    enctype   multipart form-data    contentType  false   processData  false   data  formData    Where formData was a variable created like this    var file   document getElementById  uploadedFile   files 0    var form      form   0    var formData   new FormData form    formData append  File   file

User · Answer

Or shorter      form data   submit function         var formData   new FormData this         post   this  attr  action    formData  function                success                 return false

User · Answer

For me following code work     function          debugger      document getElementById  FormId   addEventListener  submit   function  e            debugger          if  ValidDateFrom         Check Validation              var form   e target              if  form getAttribute  enctype        multipart form-data                     debugger                  if  form dataset ajax                        e preventDefault                        e stopImmediatePropagation                        var xhr   new XMLHttpRequest                        xhr open form method  form action                       xhr onreadystatechange   function  result                            debugger                          if  xhr readyState    4  amp  amp  xhr status    200                                debugger                              var responseData   JSON parse xhr responseText                               SuccessMethod responseData      Redirect to your Success method                                                                       xhr send new FormData form                                                     true         In your Action Post Method  pass parameter as HttpPostedFileBase UploadFile and make sure your file input has same as mentioned in your parameter of the Action Method   It should work with AJAX Begin form  as well    Remember over here that your AJAX BEGIN Form will not work over here since you make your post call defined in the code mentioned above and you can reference your method in the code as per the Requirement  I know I am answering late but this is what worked for me

User · Answer

another option is to use an iframe and set the form s target to it   you may try this  it uses jQuery    function ajax form  form  on complete        var iframe       if    form attr  target                    create a unique iframe for the form         iframe       lt iframe gt  lt  iframe gt    attr  name    ajax form     Math floor Math random     999999   hide   appendTo    body              form attr  target   iframe attr  name                if  on complete                iframe   iframe       iframe name       form attr  target                    iframe load function                            get the server response             var response   iframe contents   find  body   text                on complete response                         it works well with all browsers  you don t need to serialize or prepare the data  one down side is that you can t monitor the progress   also  at least for chrome  the request will not appear in the  xhr  tab of the developer tools but under  doc

User · Answer

For me  it didn t work without enctype   multipart form-data  field in the Ajax request  I hope it helps someone who is stuck in a similar problem   Even though the enctype was already set in the form attribute  for some reason  the Ajax request didn t automatically identify the enctype without explicit declaration  jQuery 3 3 1       Tested  this works for me  jQuery 3 3 1   fileUploadForm submit function  e           e preventDefault          ajax               type   POST               url    this  attr  action                enctype   multipart form-data               data  new FormData this               processData  false              contentType  false              success  function  data                    console log  Thank God it worked                                            enctype field was set in the form but Ajax request didn t set it by default    lt form action  process file-upload  enctype  multipart form-data  method  post   gt         lt input type  file  name  input-file  accept  text plain  required gt             lt  form gt    As others mentioned above  please also pay special attention to the contentType and processData fields

User · Answer

lt form id  form  method  post  action  otherpage php  enctype  multipart form-data  gt       lt input type  text  name  first  value  Bob    gt       lt input type  text  name  middle  value  James    gt       lt input type  text  name  last  value  Smith    gt       lt input name  image  type  file    gt       lt button type  button  id  submit btn  gt Submit lt  button gt   lt  form gt    lt script gt    document  on  click     submit btn   function  e          Prevent Instant Click       e preventDefault           Create an FormData object      var formData       form   submit function  e            return                formData 0  contain form data only         You can directly make object via using form id but it require all ajax operation inside    form   submit  lt  -- Ajax Here   -- gt       var formData   new FormData formData 0          ajax           url      form   attr  action            type   POST           data  formData          success  function  response                console log response                      contentType  false          processData  false          cache  false             return false       lt  script gt           otherpage php    lt  php     print r   FILES     gt

User · Answer

I was having this same issue in ASP Net MVC with HttpPostedFilebase and instead of using form on Submit I needed to use button on click where I needed to do some stuff and then if all OK the submit form so here is how I got it working      submitbtn   on  click   function e         var form       Form            you can t pass Jquery form it has to be javascript form object     var formData   new FormData form 0           if you only need to upload files then        Grab the File upload control and append each file manually to FormData       var files   form find   fileupload   0  files           each files  function             var file     this           formData append file 0  name  file 0                   if    form  valid                ajax               type   POST               url    form  prop  action                  dataType   json     not sure but works for me without this             data  formData              contentType  false    this is requireded please see answers above             processData  false    this is requireded please see answers above               cache  false    not sure but works for me without this             error     ErrorHandler              success   successHandler                         this will than correctly populate your MVC model  please make sure in your Model  The Property for HttpPostedFileBase   has the same name as the Name of the input control in html i e    lt input id  fileupload  type  file  name  UploadedFiles  multiple gt   public class MyViewModel       public HttpPostedFileBase   UploadedFiles   get  set

User · Answer

A Simple but more effective way   new FormData   is itself like a container  or a bag   You can put everything attr or file in itself  The only thing you ll need to append the attribute  file  fileName eg    let formData   new FormData   formData append  input   input files 0   input files 0  name    and just pass it in AJAX request  Eg        let formData   new FormData       var d       fileid   0  files 0       formData append  fileid   d       formData append  inputname   value          ajax           url    yourroute           method   POST           contentType  false          processData  false          data  formData          success  function res               console log  successfully                      error  function                console log  error                      You can append n number of files or data with FormData   and if you re making AJAX Request from Script js file to Route file in Node js beware of using  req body to access data  ie text   req files to access file  ie image  video etc

[javascript] Uploading both data and files in one form using Ajax?

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to forms