how to do file upload using jquery serialization

Question

So I have a form and I m submitting the form through ajax using jquery serialization function           serialized     Forms  serialize               ajax            type           POST           cache     false          url        blah           data          serialized          success  function data                 but then what if the form has an  lt input type  file  gt  field    how do I pass the file into the form using this ajax serialization method   printing   FILES doesn t output anything

User · Answer

document  on  click     submitBtn   function e   e preventDefault    e stopImmediatePropagation    var form       myForm   closest  form    var formData   new FormData form 0      ajax       type   POST       data  formData      dataType   json       url  form attr  action        processData  false      contentType  false      success  function data             alert  Sucess  Form data posted with file type of input also                    By making use of new FormData   and setting processData  false  contentType false in ajax call submission of form with file input worked for me  Using above code I am able to submit form data with file field also through Ajax

User · Answer

A file cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript  One of the techniques to achieve this is to use hidden iframes  There s a nice jquery form plugin which allows you to AJAXify your forms and it supports file uploads as well  So using this plugin your code will simply look like this     function             ifoftheform   ajaxForm function result            alert  the form was successfully processed                  The plugin automatically takes care of subscribing to the submit event of the form  canceling the default submission  serializing the values  using the proper method and handle file upload fields

User · Answer

HTML   lt form name  my form  id  my form  accept-charset  multipart form-data  onsubmit  return false  gt       lt input id  name  name  name  placeholder  Enter Name  type  text  value    gt       lt textarea id  detail  name  detail  placeholder  Enter Detail  gt  lt  textarea gt       lt select name  gender  id  gender  gt           lt option value  male  selected  selected  gt Male lt  option gt           lt option value  female  gt Female lt  option gt       lt  select gt       lt input type  file  id  my images  name  my images  multiple    accept  image x-png image gif image jpeg   gt   lt  form gt    JavaScript  var data   new FormData       Form data var form data       my form   serializeArray      each form data  function  key  input        data append input name  input value          File data var file data      input name  my images     0  files  for  var i   0  i  lt  file data length  i          data append  my images     file data i         Custom data data append  key    value       ajax       url   URL       method   post       processData  false      contentType  false      data  data      success  function  data              success            error  function  e              error             PHP   lt  php     echo   lt pre gt        print r   POST       print r   FILES       echo   lt  pre gt        die      gt

User · Answer

var form       job-request-form   0           var formData   new FormData form           event preventDefault              ajax               url    send resume       the endpoint             type   POST      http method             processData  false              contentType  false              data  formData    It worked for me  just set processData and contentType False

User · Answer

You can upload files via AJAX by using the FormData method  Although IE7 8 and 9 do not support FormData functionality     ajax       url   ajax php        type   POST                    data  new FormData  form        contentType  false             cache  false                   processData false       success  function data                response   html data

User · Answer

Use FormData object It works for any type of form   document  on  quot submit quot    quot form quot   function event        event preventDefault          ajax           url    this  attr  quot action quot            type    this  attr  quot method quot            dataType   quot JSON quot           data  new FormData this           processData  false          contentType  false          success  function  data  status                                error  function  xhr  desc  err

User · Answer

hmmmm i think there is much efficient way to make it specially for people want to target all browser and not only  FormData supported browser   the idea to have hidden IFRAME on page and making normal submit for the From inside IFrame  example    lt FORM action  save upload php  method post    enctype  multipart form-data  target hidden upload gt      lt DIV gt  lt input       type file name  upload scn  class file upload gt  lt  DIV gt      lt INPUT       type submit name submit value Upload   gt   lt IFRAME id hidden upload       name hidden upload src    onLoad  uploadDone  hidden upload          style  width 0 height 0 border 0px solid  fff  gt  lt  IFRAME gt    lt  FORM gt    most important to make a target of form the hidden iframe ID or name and enctype multipart form-data to allow accepting photos  javascript side  function getFrameByName name        for  var i   0  i  lt  frames length  i            if  frames i  name    name              return frames i        return null     function uploadDone name        var frame   getFrameByName name       if  frame            ret   frame document getElementsByTagName  body   0  innerHTML           if  ret length                var json   JSON parse ret               do what ever you want                      server Side Example PHP   lt  php    target filepath     tmp     basename   FILES  upload scn    name        if  move uploaded file   FILES  upload scn    tmp name     target filepath          result             echo json encode  result     gt

User · Answer

HTML5 introduces FormData class that can be used to file upload with ajax   FormData support starts from following desktop browsers versions  IE 10   Firefox 4 0   Chrome 7   Safari 5   Opera 12   FormData - Mozilla org

[php] how to do file upload using jquery serialization

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to serialization

Examples related to file-upload