Using HTML5 file uploads with AJAX and jQuery

Question

Admittedly  there are similar questions lying around on Stack Overflow  but it seems none quite meet my requirements   Here is what I m looking to do    Upload an entire form of data  one piece of which is a single file Work with Codeigniter s file upload library   Up until here  all is well  The data gets in my database as I need it  But I d also like to submit my form via an AJAX post    Using the native HTML5 File API  not flash or an iframe solution Preferably interfacing with the low-level  ajax   jQuery method   I think I could imagine how to do this by auto-uploading the file when the field s value changes using pure javascript  but I d rather do it all in one fell swoop on for submit in jQuery  I m thinking it s not possible to do via query strings as I need to pass the entire file object  but I m a little lost on what to do at this point    Can this be achieved

User · Accepted Answer

It s not too hard  Firstly  take a look at FileReader Interface   So  when the form is submitted  catch the submission process and  var file   document getElementById  fileBox   files 0     Files 0    1st file var reader   new FileReader    reader readAsText file   UTF-8    reader onload   shipOff    reader onloadstart         reader onprogress        lt -- Allows you to update a progress bar    reader onabort         reader onerror         reader onloadend         function shipOff event        var result   event target result      var fileName   document getElementById  fileBox   files 0  name    Should be  picture jpg        post   myscript php     data  result  name  fileName    continueSubmission       Then  on the server side  i e  myscript php     data     POST  data     fileName     POST  name     serverFile   time    fileName   fp   fopen   uploads    serverFile  w      Prepends timestamp to prevent overwriting fwrite  fp   data   fclose  fp    returnData   array   serverFile    gt   serverFile    echo json encode  returnData     Or something like it  I may be mistaken  and if I am  please  correct me   but this should store the file as something like 1287916771myPicture jpg in  uploads  on your server  and respond with a JSON variable  to a continueSubmission   function  containing the fileName on the server   Check out fwrite   and jQuery post     On the above page it details how to use readAsBinaryString    readAsDataUrl    and readAsArrayBuffer   for your other needs  e g  images  videos  etc

User · Answer

With jQuery  and without FormData API  you can use something like this    function readFile file      var loader   new FileReader       var def     Deferred    promise   def promise          --- provide classic deferred interface    loader onload   function  e    def resolve e target result         loader onprogress   loader onloadstart   function  e    def notify e         loader onerror   loader onabort   function  e    def reject e         promise abort   function      return loader abort apply loader  arguments          loader readAsBinaryString file       return promise     function upload url  data       var def     Deferred    promise   def promise        var mul   buildMultipart data       var req     ajax           url  url          data  mul data          processData  false          type   post           async  true          contentType   multipart form-data  boundary   mul bound          xhr  function                 var xhr   jQuery ajaxSettings xhr                if  xhr upload                     xhr upload addEventListener  progress   function event                        var percent   0                      var position   event loaded    event position    event position is deprecated                       var total   event total                      if  event lengthComputable                            percent   Math ceil position   total   100                           def notify percent                                                                false                             return xhr                        req done function    def resolve apply def  arguments              fail function    def reject apply def  arguments            promise abort   function    return req abort apply req  arguments          return promise     var buildMultipart   function data       var key  crunks       bound   false      while   bound            bound     md5     md5 new Date   valueOf       new Date   valueOf             for  key in data  if   data key  indexOf bound     bound   false  continue               for  var key   0  l   data length  key  lt  l  key             if  typeof data key  value       string                 crunks push  --  bound   r n                    Content-Disposition  form-data  name     data key  name      filename     data key  value 1      r n                    Content-Type  application octet-stream r n                    Content-Transfer-Encoding  binary r n r n                   data key  value 0             else              crunks push  --  bound   r n                    Content-Disposition  form-data  name     data key  name     r n r n                   data key  value                        return           bound  bound          data  crunks join   r n     r n--  bound  --               ----------   ---------- On submit form  var form      form    var  file   form find   file    readFile  file 0  files 0   done function fileData      var formData   form find   input not   file     serializeArray       formData file    fileData   file 0  files 0  name      upload form attr  action    formData  done function    alert  successfully uploaded               With FormData API you just have to add all fields of your form to FormData object and send it via   ajax   url  url  data  formData  processData  false  contentType  false  type  POST

[javascript] Using HTML5 file uploads with AJAX and jQuery

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to html

Examples related to file-upload