How can I upload files asynchronously

Question

I would like to upload a file asynchronously with jQuery     x000D   x000D    document  ready function      x000D          uploadbutton   click function      x000D          var filename       file   val    x000D   x000D            ajax   x000D              type   POST   x000D              url   addFile do   x000D              enctype   multipart form-data   x000D              data    x000D                  file  filename x000D                 x000D              success  function      x000D                  alert  Data Uploaded      x000D                x000D              x000D          x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 2 0 jquery min js  gt  lt  script gt  x000D   lt span gt File lt  span gt  x000D   lt input type  file  id  file  name  file  size  10   gt  x000D   lt input id  uploadbutton  type  button  value  Upload   gt  x000D   x000D   x000D    Instead of the file being uploaded  I am only getting the filename  What can I do to fix this problem

User · Answer

I recommend using the Fine Uploader plugin for this purpose  Your JavaScript code would be     document  ready function           uploadbutton   jsupload       action   addFile do       onComplete  function response         alert   server response      response

User · Answer

You can pass additional parameters along with file name on making asynchronous upload using XMLHttpRequest  without flash and iframe dependency   Append the additional parameter value with FormData and send the upload request     var formData   new FormData    formData append  parameter1    value1    formData append  parameter2    value2     formData append  file      input type file    0  files 0       ajax       url   post back url       data  formData     other attributes of AJAX         Also  Syncfusion JavaScript UI file upload provides solution for this scenario simply using event argument  you can find documentation here and further details about this control here enter link description here

User · Answer

I ve written this up in a Rails environment   It s only about five lines of JavaScript  if you use the lightweight jQuery-form plugin   The challenge is in getting AJAX upload working as the standard remote form for doesn t understand multi-part form submission  It s not going to send the file data Rails seeks back with the AJAX request      That s where the jQuery-form plugin comes into play     Here   s the Rails code for it    lt   remote form for  image form                       url   gt     controller   gt   blogs    action   gt   create asset                         html   gt     method   gt   post                                  id   gt   uploadForm    multipart   gt  true                                                                             do  f    gt   Upload a file   lt    f file field  uploaded data   gt   lt   end   gt    Here   s the associated JavaScript       uploadForm input   change function       this  parent   ajaxSubmit     beforeSubmit  function a f o       o dataType    json          complete  function XMLHttpRequest  textStatus          XMLHttpRequest responseText will contain the URL of the uploaded image        Put it in an image element you create  or do with it what you will        For example  if you have an image elemtn with id  my image   then            my image   attr  src   XMLHttpRequest responseText         Will set that image tag to display the uploaded image                  And here   s the Rails controller action  pretty vanilla     image   Image new params  image form     image save  render  text   gt   image public filename   I   ve been using this for the past few weeks with Bloggity  and it   s worked like a champ

User · Answer

I recommend using the Fine Uploader plugin for this purpose  Your JavaScript code would be     document  ready function           uploadbutton   jsupload       action   addFile do       onComplete  function response         alert   server response      response

User · Answer

Here s just another solution of how to upload file  without any plugin    Using simple Javascripts and AJAX  with progress-bar   HTML part   lt form id  upload form  enctype  multipart form-data  method  post  gt       lt input type  file  name  file1  id  file1  gt  lt br gt       lt input type  button  value  Upload File  onclick  uploadFile    gt       lt progress id  progressBar  value  0  max  100  style  width 300px   gt  lt  progress gt       lt h3 id  status  gt  lt  h3 gt       lt p id  loaded n total  gt  lt  p gt   lt  form gt    JS part  function   el       return document getElementById el     function uploadFile        var file      file1   files 0          alert file name       file size       file type       var formdata   new FormData        formdata append  file1   file       var ajax   new XMLHttpRequest        ajax upload addEventListener  progress   progressHandler  false       ajax addEventListener  load   completeHandler  false       ajax addEventListener  error   errorHandler  false       ajax addEventListener  abort   abortHandler  false       ajax open  POST    file upload parser php        ajax send formdata     function progressHandler event          loaded n total   innerHTML    Uploaded   event loaded   bytes of   event total      var percent    event loaded   event total    100         progressBar   value   Math round percent          status   innerHTML   Math round percent     uploaded    please wait     function completeHandler event          status   innerHTML   event target responseText         progressBar   value   0    function errorHandler event          status   innerHTML    Upload Failed     function abortHandler event          status   innerHTML    Upload Aborted       PHP part   lt  php  fileName     FILES  file1    name       The file name  fileTmpLoc     FILES  file1    tmp name       File in the PHP tmp folder  fileType     FILES  file1    type       The type of file it is  fileSize     FILES  file1    size       File size in bytes  fileErrorMsg     FILES  file1    error       0 for false    and 1 for true if    fileTmpLoc       if file not chosen     echo  ERROR  Please browse for a file before clicking the upload button        exit      if move uploaded file  fileTmpLoc   test uploads  fileName        assuming the directory name  test uploads      echo   fileName upload is complete     else       echo  move uploaded file function failed       gt    Here s the EXAMPLE application

User · Answer

You can use newer Fetch API by JavaScript  Like this                                function uploadButtonCLicked        var input   document querySelector  input type  file          fetch   url           method   POST         body  input files 0         then res   gt  res json         you can do something with response        catch error   gt  console error  Error    error          then response   gt  console log  Success    response                                       Advantage  Fetch API is natively supported by all modern browsers  so you don t have to import anything  Also  note that fetch   returns a Promise which is then handled by using  then   code to handle response    asynchronously

User · Answer

This is my solution    lt form enctype  multipart form-data  gt            lt div class  form-group  gt           lt label class  control-label col-md-2  for  apta Description  gt Description lt  label gt           lt div class  col-md-10  gt               lt input class  form-control text-box single-line  id  apta Description  name  apta Description  type  text  value    gt           lt  div gt       lt  div gt        lt input name  file  type  file    gt       lt input type  button  value  Upload    gt   lt  form gt    and the js   lt script gt           button   click function              var formData   new FormData    form   0              ajax               url    Url Action  Save    Home                   type   POST                               success  completeHandler              data  formData              cache  false              contentType  false              processData  false                              function completeHandler             alert                   lt  script gt    Controller   HttpPost  public ActionResult Save string apta Description  HttpPostedFileBase file

User · Answer

A solution I found was to have the  lt form gt  target a hidden iFrame  The iFrame can then run JS to display to the user that it s complete  on page load

User · Answer

For PHP  look for https   developer hyvor com php image-upload-ajax-php-mysql  HTML   lt html gt   lt head gt       lt title gt Image Upload with AJAX  PHP and MYSQL lt  title gt   lt  head gt   lt body gt   lt form onsubmit  submitForm event    gt       lt input type  file  name  image  id  image-selecter  accept  image    gt       lt input type  submit  name  submit  value  Upload Image  gt   lt  form gt   lt div id  uploading-text  style  display none   gt Uploading    lt  div gt   lt img id  preview  gt   lt  body gt   lt  html gt    JAVASCRIPT  var previewImage   document getElementById  preview          uploadingText   document getElementById  uploading-text     function submitForm event           prevent default form submission     event preventDefault        uploadImage       function uploadImage         var imageSelecter   document getElementById  image-selecter            file   imageSelecter files 0       if   file           return alert  Please select a file           clear the previous image     previewImage removeAttribute  src           show uploading text     uploadingText style display    block          create form data and append the file     var formData   new FormData        formData append  image   file          do the ajax part     var ajax   new XMLHttpRequest        ajax onreadystatechange   function             if  this readyState     4  amp  amp  this status     200                var json   JSON parse this responseText               if   json    json status     true                   return uploadError json error                showImage json url                       ajax open  POST    upload php   true       ajax send formData      send the form data     PHP   lt  php  host    localhost    user    user    password    password    database    database    mysqli   new mysqli  host   user   password   database      try       if  empty   FILES  image               throw new Exception  Image file is missing               image     FILES  image           check INI error     if   image  error       0            if   image  error       1               throw new Exception  Max upload size exceeded             throw new Exception  Image uploading error  INI Error                 check if the file exists     if   file exists  image  tmp name             throw new Exception  Image file is missing in the server         maxFileSize   2   10e6     in bytes     if   image  size    gt   maxFileSize          throw new Exception  Max size limit exceeded            check if uploaded file is an image      imageData   getimagesize  image  tmp name         if    imageData           throw new Exception  Invalid image         mimeType    imageData  mime           validate mime type      allowedMimeTypes     image jpeg    image png    image gif        if   in array  mimeType   allowedMimeTypes            throw new Exception  Only JPEG  PNG and GIFs are allowed            nice  it s a valid image        get file extension  ex  jpg  png  not   jpg       fileExtention   strtolower pathinfo  image  name    PATHINFO EXTENSION           create random name for your image      fileName   round microtime true     mt rand            fileExtention     anyfilename jpg        Create the path starting from DOCUMENT ROOT of your website      path     examples image-upload images      fileName         file path in the computer - where to save it       destination     SERVER  DOCUMENT ROOT      path       if   move uploaded file  image  tmp name     destination           throw new Exception  Error in moving the uploaded file            create the url      protocol   stripos   SERVER  SERVER PROTOCOL    https       true    https        http           domain    protocol     SERVER  SERVER NAME         url    domain    path       stmt    mysqli - gt  prepare  INSERT INTO image uploads  url  VALUES            if            stmt  amp  amp           stmt - gt  bind param  s    url   amp  amp           stmt - gt  execute                   exit              json encode                  array                       status    gt  true                       url    gt   url                                                  else          throw new Exception  Error in saving into the database       catch  Exception  e        exit json encode          array                status    gt  false               error    gt   e - gt  getMessage

User · Answer

jQuery Uploadify is another good plugin which I have used before to upload files  The JavaScript code is as simple as the following  code  However  the new version does not work in Internet nbsp Explorer       file upload   uploadify        swf     public js uploadify swf        uploader     Upload ashx formGuid         formGuid   val         cancelImg     public images uploadify-cancel png        multi   true       onQueueComplete   function  queueData                               onUploadStart   function  file                               I have done a lot of searching and I have come to another solution for uploading files without any plugin and only with ajax  The solution is as below     document  ready function              btn Upload   live  click   AjaxFileUpload        function AjaxFileUpload         var fileInput   document getElementById   Uploader        var file   fileInput files 0       var fd   new FormData        fd append  files   file       var xhr   new XMLHttpRequest        xhr open  POST    Uploader ashx        xhr onreadystatechange   function              if  xhr readyState    4                 alert  success                      else if  uploadResult     success               alert  error               xhr send fd

User · Answer

What if using promises which ajax and checking if the file is valid and well saved in your backend  so you can use some animation in front while user is navigating thought your page   You can even make it paralel upload or stacking with recursive approach

User · Answer

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server  For your case  you need to use Ajax to facilitate the file upload to the server    lt from action    id  formContent  method  post  enctype  multipart form-data  gt       lt span gt File lt  span gt       lt input type  file  id  file  name  file  size  10   gt       lt input id  uploadbutton  type  button  value  Upload   gt   lt  form gt    The data being submitted is a formdata  On your jQuery  use a form submit function instead of a button click to submit the form file as shown below     document  ready function             formContent   submit function e         e preventDefault         var formdata   new FormData this       ajax        url   ajax upload image php        type   POST        data  formdata       mimeTypes  multipart form-data        contentType  false       cache  false       processData  false       success  function          alert  successfully submitted                           View more details

User · Answer

Simple Ajax Uploader is another option   https   github com LPology Simple-Ajax-Uploader   Cross-browser -- works in IE7   Firefox  Chrome  Safari  Opera Supports multiple  concurrent uploads -- even in non-HTML5 browsers No flash or external CSS -- just one 5Kb Javascript file Optional  built-in support for fully cross-browser progress bars  using PHP s APC extension  Flexible and highly customizable -- use any element as upload button  style your own progress indicators No forms required  just provide an element that will serve as upload button MIT license -- free to use in commercial project   Example usage   var uploader   new ss SimpleUpload       button      uploadBtn       upload button     url    uploadhandler      URL of server-side upload handler     name   userfile      parameter name of the uploaded file     onSubmit  function             this setProgressBar      progressBar         designate elem as our progress bar            onComplete  function file  response               do whatever after upload is finished

User · Answer

The simplest and most robust way I have done this in the past  is to simply target a hidden iFrame tag with your form - then it will submit within the iframe without reloading the page   That is if you don t want to use a plugin  JavaScript or any other forms of  magic  other than HTML   Of course you can combine this with JavaScript or what have you      lt form target  iframe  action    method  post  enctype  multipart form-data  gt       lt input name  file  type  file    gt       lt input type  button  value  Upload    gt   lt  form gt    lt iframe name  iframe  id  iframe  style  display none   gt  lt  iframe gt    You can also read the contents of the iframe onLoad for server errors or success responses and then output that to user   Chrome  iFrames  and onLoad   -note- you only need to keep reading if you are interested in how to setup a UI blocker when doing uploading downloading  Currently Chrome doesn t trigger the onLoad event for the iframe when it s used to transfer files   Firefox  IE  and Edge all fire the onload event for file transfers   The only solution that I found works for Chrome was to use a cookie     To do that basically when the upload download is started     Client Side  Start an interval to look for the existence of a cookie  Server Side  Do whatever you need to with the file data  Server Side  Set cookie for client side interval  Client Side  Interval sees the cookie and uses it like the onLoad event   For example you can start a UI blocker and then onLoad   or when cookie is made    you remove the UI blocker    Using a cookie for this is ugly but it works     I made a jQuery plugin to handle this issue for Chrome when downloading  you can find here  https   github com ArtisticPhoenix jQuery-Plugins blob master iDownloader js  The same basic principal applies to uploading  as well   To use the downloader    include the JS  obviously        body   iDownloader         onComplete    function                  uiBlocker   css  display    none      hide ui blocker on complete                  somebuttion   click  function              uiBlocker   css  display    block      block the UI          body   iDownloader  download    htttp   example com location of download           And on the server side  just before transferring the file data  create the cookie   setcookie  iDownloader   true  time     30          The plugin will see the cookie  and then trigger the onComplete callback

User · Answer

A modern approach without Jquery is to use the FileList object you get back from  lt input type  file  gt  when user selects a file s  and then use Fetch to post the FileList wrapped around a FormData object      The input DOM element     lt input type  file  gt  const inputElement   document querySelector  input type file         Listen for a file submit from user inputElement addEventListener  change        gt        const data   new FormData        data append  file   inputElement files 0        data append  imageName    flower            You can then post it to your server         Fetch can accept an object of type FormData on its  body     fetch   uploadImage             method   POST           body  data

User · Answer

You could also consider using something like https   uppy io   It does file uploading without navigating away from the page and offers a few bonuses like drag  amp  drop  resuming uploads in case of browser crashes flaky networks  and importing from e g  Instagram  It s open source and does not rely on jQuery React Angular Vue  but can be used with it  Disclaimer  as its creator I m biased

User · Answer

2019 Update  It still depends on the browsers your demographic uses   An important thing to understand with the  new  HTML5 file API is that it wasn t supported until IE  10  If the specific market you re aiming at has a higher-than-average propensity toward older versions of Windows  you might not have access to it   As of 2017  about 5  of browsers are one of IE 6  7  8 or 9  If you head into a big corporation  e g   this is a B2B tool  or something you re delivering for training  that number can skyrocket  In 2016  I dealt with a company using IE8 on over 60  of their machines   It s 2019 as of this edit  almost 11 years after my initial answer  IE9 and lower are globally around the 1  mark but there are still clusters  of higher usage   The important take-away from this    whatever the feature    is  check what browser your users use  If you don t  you ll learn a quick and painful lesson in why  works for me  isn t good enough in a deliverable to a client  caniuse is a useful tool but note where they get their demographics from  They may not align with yours  This is never truer than enterprise environments   My answer from 2008 follows     However  there are viable non-JS methods of file uploads  You can create an iframe on the page  that you hide with CSS  and then target your form to post to that iframe  The main page doesn t need to move   It s a  real  post so it s not wholly interactive  If you need status you need something server-side to process that  This varies massively depending on your server  ASP NET has nicer mechanisms  PHP plain fails  but you can use Perl or Apache modifications to get around it   If you need multiple file-uploads  it s best to do each file one at a time  to overcome maximum file upload limits   Post the first form to the iframe  monitor its progress using the above and when it has finished  post the second form to the iframe  and so on   Or use a Java Flash solution  They re a lot more flexible in what they can do with their posts

User · Answer

To upload file asynchronously with Jquery use below steps  step 1 In your project open Nuget manager and add package  jquery fileupload only you need to write it in search box it will come up and install it    URL  https   github com blueimp jQuery-File-Upload step 2 Add below scripts in the HTML files  which are already added to the project by running above package   jquery ui widget js jquery iframe-transport js jquery fileupload js  step 3  Write file upload control as per below code   lt input id  quot upload quot  name  quot upload quot  type  quot file quot    gt   step 4  write a js method as uploadFile as below   function uploadFile element                       element  fileupload                        dataType   json                   url      DocumentUpload upload                   autoUpload  true                  add  function  e  data                                    write code for implementing  while selecting a file                        data represents the file data                       below code triggers the action in mvc controller                   data formData                                                                              files  data files 0                                                           data submit                                       done  function  e  data                                    after file uploaded                                    progress  function  e  data                                               progress                                    fail  function  e  data                                              fail operation                                    stop  function                                             code for cancel operation                                                        step 5 In ready function call element file upload to initiate the process as per below    document  ready function         uploadFile     upload           step 6 Write MVC controller and Action as per below  public class DocumentUploadController   Controller                                System Web Mvc HttpPost          public JsonResult upload ICollection lt HttpPostedFileBase gt  files                        bool result   false               if  files    null    files Count  gt  0                                try                                       foreach  HttpPostedFileBase file in files                                                if  file ContentLength    0                              throw new Exception  quot Zero length file  quot                                                   else                                code for saving a file                                                          catch  Exception                                        result   false                                                return new JsonResult                                         Data result

User · Answer

Wrapping up for future readers   Asynchronous File Upload  With HTML5  You can upload files with jQuery using the   ajax   method if FormData and the File API are supported  both HTML5 features     You can also send files without FormData but either way the File API must be present to process files in such a way that they can be sent with XMLHttpRequest  Ajax      ajax     url   file destination html      type   POST     data  new FormData     formWithFiles   0       The form with the file inputs    processData  false    contentType  false                       Using FormData  no need to process data     done function      console log  Success  Files sent        fail function      console log  An error occurred  the files couldn t be sent           For a quick  pure JavaScript  no jQuery  example see  Sending files using a FormData object    Fallback  When HTML5 isn t supported  no File API  the only other pure JavaScript solution  no Flash or any other browser plugin  is the hidden iframe technique  which allows to emulate an asynchronous request without using the XMLHttpRequest object   It consists of setting an iframe as the target of the form with the file inputs  When the user submits a request is made and the files are uploaded but the response is displayed inside the iframe instead of re-rendering the main page  Hiding the iframe makes the whole process transparent to the user and emulates an asynchronous request   If done properly it should work virtually on any browser  but it has some caveats as how to obtain the response from the iframe    In this case you may prefer to use a wrapper plugin like Bifr  st which uses the iframe technique but also provides a jQuery Ajax transport allowing to send files with just the   ajax   method like this     ajax     url   file destination html      type   POST        Set the transport to use  iframe means to use Bifr  st       and the expected data type  json in this case     dataType   iframe json                                     fileInputs     input type  file          The file inputs containing the files to send    data    msg   Some extra data you might need       done function      console log  Success  Files sent        fail function      console log  An error occurred  the files couldn t be sent           Plugins  Bifr  st is just a small wrapper that adds fallback support to jQuery s ajax method  but many of the aforementioned plugins like jQuery Form Plugin or jQuery File Upload include the whole stack from HTML5 to different fallbacks and some useful features to ease out the process  Depending on your needs and requirements you might want to consider a bare implementation or either of this plugins

User · Answer

You can do the Asynchronous Multiple File uploads using JavaScript or jQuery and that to without using any plugin  You can also show the real time progress of file upload in the progress control  I have come across 2 nice links -   ASP NET Web Forms based Mulitple File Upload Feature with Progress Bar ASP NET MVC based Multiple File Upload made in jQuery   The server side language is C  but you can do some modification for making it work with other language like PHP   File Upload ASP NET Core MVC   In the View create file upload control in html    lt form method  post  asp-action  Add  enctype  multipart form-data  gt       lt input type  file  multiple name  mediaUpload    gt       lt button type  submit  gt Submit lt  button gt   lt  form gt    Now create action method in your controller    HttpPost  public async Task lt IActionResult gt  Add IFormFile   mediaUpload          looping through all the files     foreach  IFormFile file in mediaUpload                  saving the files         string path   Path Combine hostingEnvironment WebRootPath   some-folder-path             using  var stream   new FileStream path  FileMode Create                         await file CopyToAsync stream                       hostingEnvironment variable is of type IHostingEnvironment which can be injected to the controller using dependency injection  like   private IHostingEnvironment hostingEnvironment  public MediaController IHostingEnvironment environment        hostingEnvironment   environment

User · Answer

You can upload simply with jQuery  ajax     HTML    lt form id  upload-form  gt       lt div gt           lt label for  file  gt File  lt  label gt           lt input type  file  id  file  name  file    gt           lt progress class  progress  value  0  max  100  gt  lt  progress gt       lt  div gt       lt hr   gt       lt input type  submit  value  Submit    gt   lt  form gt    CSS   progress   display  none      Javascript     document  ready function ev            upload-form   on  submit    function ev            ev preventDefault              ajax               xhr  function                     var progress       progress                        xhr     ajaxSettings xhr                     progress show                     xhr upload onprogress   function ev                        if  ev lengthComputable                            var percentComplete   parseInt  ev loaded   ev total    100                           progress val percentComplete                           if  percentComplete     100                                progress hide   val 0                                                                                       return xhr                             url   upload php               type   POST               data  new FormData this               contentType  false              cache  false              processData  false              success  function data  status  xhr                                                      error  function xhr  status  error

User · Answer

Sample  If you use jQuery  you can do easy to an upload file  This is a small and strong jQuery plugin  http   jquery malsup com form   Example var  bar         ProgressBar        Form   ajaxForm     dataType   json      beforeSend  function xhr        var percentVal    0         bar width percentVal           uploadProgress  function event  position  total  percentComplete        var percentVal   percentComplete             bar width percentVal          success  function response           Response          I hope it would be helpful

User · Answer

Look for Handling the upload process for a file  asynchronously in here  https   developer mozilla org en-US docs Using files from web applications  Sample from the link   lt  php if  isset   FILES  myFile              Example      move uploaded file   FILES  myFile    tmp name     uploads       FILES  myFile    name         exit      gt  lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt dnd binary upload lt  title gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt       lt script type  text javascript  gt          function sendFile file                var uri     index php               var xhr   new XMLHttpRequest                var fd   new FormData                 xhr open  POST   uri  true               xhr onreadystatechange   function                     if  xhr readyState    4  amp  amp  xhr status    200                           Handle response                      alert xhr responseText      handle response                                               fd append  myFile   file                  Initiate a multipart form-data upload             xhr send fd                      window onload   function                 var dropzone   document getElementById  dropzone                dropzone ondragover   dropzone ondragenter   function event                    event stopPropagation                    event preventDefault                               dropzone ondrop   function event                    event stopPropagation                    event preventDefault                     var filesArray   event dataTransfer files                  for  var i 0  i lt filesArray length  i                          sendFile filesArray i                                                   lt  script gt   lt  head gt   lt body gt       lt div gt           lt div id  dropzone  style  margin 30px  width 500px  height 300px  border 1px dotted grey   gt Drag  amp  drop your file here    lt  div gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

It is an old question  but still has no answer correct answer  so   Have you tried jQuery-File-Upload   Here is an example from the link above that might solve your problem       fileupload   fileupload       add  function  e  data            var that   this            getJSON   example url   function  result                data formData   result     e g   id  123                blueimp fileupload prototype                  options add call that  e  data

User · Answer

A solution I found was to have the  lt form gt  target a hidden iFrame  The iFrame can then run JS to display to the user that it s complete  on page load

User · Answer

Using HTML5 and JavaScript  uploading async is quite easy  I create the uploading logic along with your html  this is not fully working as it needs the api  but demonstrate how it works  if you have the endpoint called  upload from root of your website  this code should work for you   x000D   x000D  const asyncFileUpload        gt      const fileInput   document getElementById  file      const file   fileInput files 0     const uri     upload     const xhr   new XMLHttpRequest      xhr upload onprogress   e   gt        const percentage   e loaded   e total      console log percentage          xhr onreadystatechange   e   gt        if  xhr readyState     4  amp  amp  xhr status     200          console log  file uploaded                 xhr open  POST   uri  true     xhr setRequestHeader  X-FileName   file name     xhr send file     x000D   lt form gt     lt span gt File lt  span gt     lt input type  file  id  file  name  file  size  10    gt     lt input onclick  asyncFileUpload    id  upload  type  button  value  Upload    gt   lt  form gt  x000D   x000D   x000D   Also some further information about XMLHttpReques   The XMLHttpRequest Object All modern browsers support the XMLHttpRequest object  The XMLHttpRequest object can be used to exchange data with a web server behind the scenes  This means that it is possible to update parts of a web page  without reloading the whole page     Create an XMLHttpRequest Object All modern browsers  Chrome  Firefox  IE7   Edge  Safari  Opera  have a built-in XMLHttpRequest object  Syntax for creating an XMLHttpRequest object  variable   new XMLHttpRequest        Access Across Domains For security reasons  modern browsers do not allow access across domains  This means that both the web page and the XML file it tries to load  must be located on the same server  The examples on W3Schools all open XML files located on the W3Schools domain  If you want to use the example above on one of your own web pages  the XML files you load must be located on your own server   For more details  you can continue reading here

User · Answer

This AJAX file upload jQuery plugin uploads the file somehwere  and passes the response to a callback  nothing else     It does not depend on specific HTML  just give it a  lt input type  file  gt  It does not require your server to respond in any particular way It does not matter how many files you use  or where they are on the page   -- Use as little as --      one-specific-file   ajaxfileupload      action     upload php        -- or as much as --     input type  file     ajaxfileupload      action     upload php      params          extra    info          onComplete   function response        console log  custom handler for file         alert JSON stringify response            onStart   function         if weWantedTo  return false     cancels upload         onCancel   function         console log  no file selected

User · Answer

Note  This answer is outdated  it is now possible to upload files using XHR     You cannot upload files using XMLHttpRequest  Ajax   You can simulate the effect using an iframe or Flash  The excellent jQuery Form Plugin that posts your files through an iframe to get the effect

User · Answer

I have been using the below script to upload images which happens to work fine   HTML   lt input id  file  type  file  name  file   gt   lt div id  response  gt  lt  div gt    JavaScript  jQuery  document   ready function        var input   document getElementById  file        var formdata   false      if  window FormData            formdata   new FormData              input addEventListener  change   function  evt            var i   0  len   this files length  img  reader  file           for     i  lt  len  i                   file   this files i                if    file type match  image                        if   window FileReader                         reader   new FileReader                        reader onloadend   function  e                              showUploadedItem e target result  file fileName                                              reader readAsDataURL file                                      if  formdata                        formdata append  image   file                       formdata append  extra   extra-data                                       if  formdata                        jQuery  div response   html   lt br   gt  lt img src  ajax-loader gif   gt                          jQuery ajax                           url   upload php                           type   POST                           data  formdata                          processData  false                          contentType  false                          success  function  res                             jQuery  div response   html  Successfully uploaded                                                                                                  else                               alert  Not a vaild image                                     false         Explanation  I use response div to show the uploading animation and response after upload is done   Best part is you can send extra data such as ids  amp  etc with the file when you use this script  I have mention it extra-data as in the script   At the PHP level this will work as normal file upload  extra-data can be retrieved as   POST data   Here you are not using a plugin and stuff  You can change the code as you want  You are not blindly coding here  This is the core functionality of any jQuery file upload  Actually Javascript

User · Answer

You can do it in vanilla JavaScript pretty easily  Here s a snippet from my current project   var xhr   new XMLHttpRequest    xhr upload onprogress   function e        var percent    e position  e totalSize          Render a pretty progress bar    xhr onreadystatechange   function e        if this readyState     4               Handle file upload complete          xhr open  POST     upload   true   xhr setRequestHeader  X-FileName  file name      Pass the filename along xhr send file

User · Answer

Try   x000D   x000D  async function saveFile    x000D    x000D      let formData   new FormData               x000D      formData append  file   file files 0    x000D      await fetch  addFile do    method   POST   body  formData        x000D      alert  Data Uploaded      x000D    x000D   lt span gt File lt  span gt  x000D   lt input type  file  id  file  name  file  size  10   gt  x000D   lt input type  button  value  Upload  onclick  saveFile     gt  x000D   x000D   x000D    The content-type  multipart form-data  is set by browser automatically  the file name is added automatically too to filename FormData parameter  and can be easy read by server   Here is more developed example with err handling and json adding   x000D   x000D  async function saveFile inp   x000D    x000D      let user     name  john   age 34    x000D      let formData   new FormData    x000D      let photo   inp files 0         x000D            x000D      formData append  photo   photo   x000D      formData append  user   JSON stringify user      x000D       x000D      try   x000D         let r   await fetch   upload image    method   POST   body  formData     x000D         console log  HTTP response code   r status    x000D         alert  success    x000D        catch e    x000D         console log  Huston we have problem       e   x000D        x000D       x000D    x000D   lt input type  file  onchange  saveFile this    gt  x000D   lt br gt  lt br gt  x000D  Before selecting the file Open chrome console  gt  network tab to see the request details  x000D   lt br gt  lt br gt  x000D   lt small gt Because in this example we send request to https   stacksnippets net upload image the response code will be 404 ofcourse    lt  small gt  x000D   x000D   x000D

User · Answer

You can use the following code   async  false true

User · Answer

var formData new FormData    formData append  fieldname   value    formData append  image      name  filename     0  files 0       ajax       url  page php       data formData      type   POST       dataType  JSON       cache  false      contentType  false      processData  false      success function data           You can use form data to post all your values including images

User · Answer

You can use    function             file upload 1   uploadify           height          30          swf               uploadify uploadify swf           uploader          uploadify uploadify php           width           120               Demo

User · Answer

With HTML5 you can make file uploads with Ajax and jQuery  Not only that  you can do file validations  name  size  and MIME type  or handle the progress event with the HTML5 progress tag  or a div   Recently I had to make a file uploader  but I didn t want to use Flash nor Iframes or plugins and after some research I came up with the solution   The HTML    lt form enctype  multipart form-data  gt       lt input name  file  type  file    gt       lt input type  button  value  Upload    gt   lt  form gt   lt progress gt  lt  progress gt    First  you can do some validation if you want  For example  in the  on  change   event of the file       file   on  change   function        var file   this files 0      if  file size  gt  1024        alert  max upload size is 1k              Also see  name   type       Now the   ajax   submit with the button s click       button   on  click   function          ajax          Your server script to process the upload     url   upload php       type   POST           Form data     data  new FormData    form   0            Tell jQuery not to process data or worry about content-type        You  must  include these options      cache  false      contentType  false      processData  false          Custom XMLHttpRequest     xhr  function            var myXhr     ajaxSettings xhr          if  myXhr upload               For handling the progress of the upload         myXhr upload addEventListener  progress   function  e              if  e lengthComputable                   progress   attr                 value  e loaded                max  e total                                         false                 return myXhr                    As you can see  with HTML5  and some research  file uploading not only becomes possible but super easy  Try it with Google Chrome as some of the HTML5 components of the examples aren t available in every browser

User · Answer

Convert file to base64 using  HTML5 s readAsDataURL   or some base64 encoder   Fiddle here  var reader   new FileReader             reader onload   function readerEvt                var binaryString   readerEvt target result              document getElementById  base64textarea   value   btoa binaryString                       reader readAsBinaryString file     Then to retrieve   window open  data application octet-stream base64     base64

[javascript] How can I upload files asynchronously?

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to asynchronous

Examples related to xmlhttprequest