jQuery Ajax File Upload

Question

Can I use the following jQuery code to perform file upload using POST method of an ajax request      ajax       type   POST       timeout  50000      url  url      data  dataString      success  function  data            alert  success            return false              If it is possible  do I need to fill data part  Is it the correct way  I only POST the file to the server side   I have been googling around  but what I found was a plugin while in my plan I do not want to use it  At least for the moment

User · Answer

Iframes is no longer needed for uploading files through ajax. I've recently done it by myself. Check out these pages:

Using HTML5 file uploads with AJAX and jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Updated the answer and cleaned it up. Use the getSize function to check size or use getType function to check types. Added progressbar html and css code.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

How to use the Upload class

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

Progressbar html code

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Progressbar css code

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

User · Answer

To get all your form inputs  including the type  file  you need to use FormData object   you will be able to see the formData content in the debugger -  network - Headers after you will submit the form   var url    YOUR URL    var form       YOUR FORM ID   0   var formData   new FormData form       ajax url        method   post       processData  false      contentType  false      data  formData    done function data       if  data success            alert  Files uploaded          else           alert  Error while uploading the files             fail function data       console log data       alert  Error while uploading the files

User · Answer

In case you want to do it like that     upload  form action  new FormData  myForm    progress  function  progressEvent  upload        if  progressEvent lengthComputable            var percent   Math round  progressEvent loaded   100   progressEvent total                 if  upload                console log  percent     uploaded              else               console log  percent     downloaded                        done  function         console log   Finished upload                              than   https   github com lgersman jquery orangevolt-ampere blob master src jquery upload js  might be your solution

User · Answer

quot  submit car quot   click function       var formData   new FormData     car cost form   0        ajax        url   car costs php        data  formData       contentType  false       processData  false       cache  false       type   POST        success  function data                                     edit  Note contentype and process data You can simply use this to upload files via Ajax       submit input cannot be outside form element

User · Answer

Here s how I got this working    HTML   lt input type  file  id  file  gt   lt button id  process-file-button  gt Process lt  button gt    JS      process-file-button   on  click   function  e        let files   new FormData       you can consider this as  data bag          url    yourUrl        files append  fileName       file   0  files 0       append selected file to the bag named  file         ajax           type   post           url  url          processData  false          contentType  false          data  files          success  function  response                console log response                      error  function  err                console log err                           PHP  if  isset   FILES   amp  amp   empty   FILES          file     FILES  fileName         name    file  name         path    file  tmp name             process your file

User · Answer

2019 update   html   lt form class  fr  method  POST  enctype  multipart form-data  gt     csrf token     lt textarea name  text  gt   lt input name  example image  gt   lt button type  submit  gt   lt  form gt    js    document  on  submit     fr   function           ajax            type   post            url  url   lt --- you insert proper URL path to call your views py function here          enctype   multipart form-data           processData  false          contentType  false          data  new FormData this            success  function data                 console log data                                 return false             views py  form   ThisForm request POST  request FILES   if form is valid        text   form cleaned data get  text       example image   request FILES  example image

User · Answer

I have handled these in a simple code  You can download a working demo from here  For your case  these very possible  I will take you step by step how you can upload a file to the server using AJAX jquery    First let s us create an HTML file to add the following form file element as shown below    lt form action    id  formContent  method  post  enctype  multipart form-data   gt            lt input  type  file  name  file   required id  upload  gt            lt button class  submitI   gt Upload Image lt  button gt    lt  form gt    Secondly create a jquery js file and add the following code to handle our file submission to the server          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  file successfully submitted                  error  function                    alert  okey                                                   There you are done   View more

User · Answer

var dataform   new FormData     myform   0      console log dataform     ajax       url   url       type   POST       data  dataform      async  false      success  function res            response data             cache  false      contentType  false      processData  false

User · Answer

An AJAX upload is indeed possible with XMLHttpRequest    No iframes necessary  Upload progress can be shown   For details see  Answer https   stackoverflow com a 4943774 873282 to question jQuery Upload Progress and AJAX file upload

User · Answer

You can use method ajaxSubmit as follow    when you select a file that need upload to server  form be submit to server       document  ready function          var options         target    output        target element s  to be updated with server response     timeout  30000      error  function  jqXHR  textStatus                    output   html  have any error                return false                       success  afterSuccess      post-submit callback     resetForm  true                reset the form after successful submit         idOfInputFile   on  change   function              idOfForm   ajaxSubmit options          always return false to prevent standard browser submit and page navigation     return false

User · Answer

Use a hidden iframe and set your form s target to that iframe s name   This way  when the form is submitted  only the iframe will be refreshed  Have an event handler registered for the iframe s load event to parse the response

User · Answer

Use FormData  It works really well  -       var jform   new FormData    jform append  user      user   val     jform append  image      image   get 0  files 0       Here s the important bit    ajax       url    your-form-processing-page-url-here       type   POST       data  jform      dataType   json       mimeType   multipart form-data      this too     contentType  false      cache  false      processData  false      success  function data  status  jqXHR           alert  Hooray  All is well             console log data           console log status           console log jqXHR               error  function jqXHR status error              Hopefully we should never reach here         console log jqXHR           console log status           console log error

User · Answer

Using pure js it is easier  x000D   x000D  async function saveFile inp         let formData   new FormData                   formData append  file   inp files 0        await fetch   upload somedata    method   POST   body  formData            alert  success      x000D   lt input type  file  onchange  saveFile this    gt  x000D   x000D   x000D    In server side you can read original file name  and other info  which is automatically included to request  You do NOT need to set header  quot Content-Type quot  to  quot multipart form-data quot  browser will set it automatically This solutions should work on all major browsers   Here is more developed snippet with error handling  timeout and additional json sending  x000D   x000D  async function saveFile inp         let user     name  john   age 34        let formData   new FormData        let photo   inp files 0                       formData append  photo   photo       formData append  user   JSON stringify user               const ctrl   new AbortController      timeout     setTimeout      gt  ctrl abort    50000        try          let r   await fetch   upload image              method   POST   body  formData  signal  ctrl signal            console log  HTTP response code   r status           alert  success          catch e           console log  Huston we have problem       e                x000D   lt input type  file  onchange  saveFile this    gt   lt br gt  lt br gt  Before selecting the file Open chrome console  gt  network tab to see the request details   lt br gt  lt br gt   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

lt html gt       lt head gt           lt title gt Ajax file upload lt  title gt           lt script src  http   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt           lt script gt                document  ready function  e                    uploadimage   on  submit    function e                e preventDefault                          ajax                       url   upload php      Url to which the request is send                             type   POST      Type of request to be send  called as method                             data  new FormData this      Data sent to server  a set of key value pairs  i e  form fields and values                              contentType  false     The content type used when sending data to the server                              cache  false     To unable request pages to be cached                             processData false     To send DOMDocument or non processed data file it is set to false                             success  function data       A function to be called if request succeeds                                                           alert data                                                                                   lt  script gt       lt  head gt       lt body gt           lt div class  main  gt               lt h1 gt Ajax Image Upload lt  h1 gt  lt br  gt               lt hr gt               lt form id  uploadimage  action    method  post  enctype  multipart form-data  gt                   lt div id  image preview  gt  lt img id  previewing  src  noimage png    gt  lt  div gt                   lt hr id  line  gt                   lt div id  selectImage  gt                       lt label gt Select Your Image lt  label gt  lt br  gt                       lt input type  file  name  file  id  file  required   gt                       lt input type  submit  value  Upload  class  submit    gt                   lt  div gt               lt  form gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

Ajax post and upload file is possible  I m using jQuery   ajax function to load my files  I tried to use the XHR object but could not get results on the server side with PHP   var formData   new FormData    formData append  file       file   0  files 0       ajax          url    upload php          type    POST          data   formData         processData  false      tell jQuery not to process the data        contentType  false      tell jQuery not to set contentType        success   function data               console log data              alert data                  As you can see  you must create a FormData object  empty or from  serialized  -     yourForm   serialize    existing form  and then attach the input file   Here is more information   - How to upload a file using jQuery ajax and FormData - Uploading files via jQuery  object FormData is provided and no file name  GET request  For the PHP process you can use something like this     print r   FILES    fileName     FILES  file    name     fileType     FILES  file    type     fileError     FILES  file    error     fileContent   file get contents   FILES  file    tmp name      if  fileError    UPLOAD ERR OK        Processes your file here  else     switch  fileError        case UPLOAD ERR INI SIZE                message    Error al intentar subir un archivo que excede el tama  o permitido              break       case UPLOAD ERR FORM SIZE               message    Error al intentar subir un archivo que excede el tama  o permitido              break       case UPLOAD ERR PARTIAL                 message    Error  no termin   la acci  n de subir el archivo              break       case UPLOAD ERR NO FILE                 message    Error  ning  n archivo fue subido              break       case UPLOAD ERR NO TMP DIR              message    Error  servidor no configurado para carga de archivos              break       case UPLOAD ERR CANT WRITE              message   Error  posible falla al grabar el archivo              break       case  UPLOAD ERR EXTENSION              message    Error  carga de archivo no completada              break       default   message    Error  carga de archivo no completada                  break              echo json encode array                  error    gt  true                  message    gt   message

User · Answer

File upload is not possible through AJAX  You can upload file  without refreshing page by using IFrame  You can check further details here     UPDATE  With XHR2  File upload through AJAX is supported  E g  through FormData object  but unfortunately it is not supported by all old browsers   FormData support starts from following desktop browsers versions    IE 10  Firefox 4 0  Chrome 7  Safari 5  Opera 12    For more detail  see MDN link

User · Answer

Yes you can  just use javascript to get the file  making sure you read the file as a data URL  Parse out the stuff before base64 to actually get the base 64 encoded data and then if you are using php or really any back end language you can decode the base 64 data and save into a file like shown below  Javascript  var reader   new FileReader    reader onloadend   function        dataToBeSent   reader result split  base64    1       post url   data dataToBeSent      reader readAsDataURL this files 0      PHP      file put contents  my pdf   base64 decode   POST  data        Of course you will probably want to do some validation like checking which file type you are dealing with and stuff like that but this is the idea

User · Answer

I have implemented a multiple file select with instant preview and upload after removing unwanted files from preview via ajax    Detailed documentation can be found here  http   anasthecoder blogspot ae 2014 12 multi-file-select-preview-without html  Demo  http   jsfiddle net anas 6v8Kz 7 embedded result   jsFiddle  http   jsfiddle net anas 6v8Kz 7   Javascript         document  ready function           form   submit function ev               overlay   show              window  scrollTop 0           return upload images selected ev  ev target             function add new file uploader addBtn        var currentRow     addBtn  parent   parent        var newRow     currentRow  clone          newRow  find   previewImage   imagePreviewTable   hide          newRow  find   removeButton   show          newRow  find  table imagePreviewTable   find  tr   remove          newRow  find  input multipleImageFileInput   val            addBtn  parent   parent   parent   append newRow      function remove file uploader removeBtn          removeBtn  parent   parent   remove       function show image preview file selector          files selected using current file selector     var files   file selector files        Container of image previews     var imageContainer     file selector  next  table imagePreviewTable          Number of images selected     var number of images   files length        Build image preview row     var imagePreviewRow       lt tr class  imagePreviewRow 0  gt  lt td valign top style  width  510px   gt  lt  td gt               lt td valign top gt  lt input type  button  value  X  title  Remove Image  class  removeImageButton  imageIndex  0  onclick  remove selected image this     gt  lt  td gt               lt  tr gt            Add image preview row       imageContainer  html imagePreviewRow       if  number of images  gt  1            for  var i  1  i lt number of images  i                                    Generate class name of the respective image container appending index of selected images                 sothat we can match images selected and the one which is previewed                             var newImagePreviewRow     imagePreviewRow  clone   removeClass  imagePreviewRow 0   addClass  imagePreviewRow   i                 newImagePreviewRow  find  input type  button     attr  imageIndex   i                 imageContainer  append newImagePreviewRow                       for  var i   0  i  lt  files length  i              var file   files i                          Allow only images                     var imageType    image             if   file type match imageType               continue                                    Create an image dom object dynamically                     var img   document createElement  img                            Get preview area of the image                     var preview     imageContainer  find  tr imagePreviewRow   i  find  td first                            Append preview of selected image to the corresponding container                     preview append img                            Set style of appended preview Can be done via css also                      preview find  img   addClass  previewImage   css   max-width    500px    max-height    500px                             Initialize file reader                     var reader   new FileReader                           Onload event of file reader assign target image to the preview                     reader onload    function aImg    return function e    aImg src   e target result        img                          Initiate read                     reader readAsDataURL file                        Show preview               imageContainer  show       function remove selected image close button                   Remove this image from preview             var imageIndex     close button  attr  imageindex          close button  parents   imagePreviewRow     imageIndex  remove       function upload images selected event  formObj        event preventDefault          Get number of images     var imageCount       previewImage   length        Get all multi select inputs     var fileInputs   document querySelectorAll   multipleImageFileInput          Url where the image is to be uploaded     var url    upload-directory          Get number of inputs     var number of inputs     fileInputs  length       var inputCount   0         Iterate through each file selector input       fileInputs  each function index  input            fileList   input files             Create a new FormData object          var formData   new FormData              Extra parameters can be added to the form data object         formData append  bulk upload    1            formData append  username      input name  username     val               Iterate throug each images selected by each file selector and find if the image is present in the preview         for  var i   0  i  lt  fileList length  i                  if    input  next   imagePreviewTable   find   imagePreviewRow   i  length    0                    var file   fileList i                      Check the file type                  if   file type match  image                            continue                                       Add the file to the request                  formData append  image uploader multiple     inputCount          file  file name                                      Set up the request          var xhr   new XMLHttpRequest            xhr open  POST   url  true           xhr onload   function                  if  xhr status     200                    var jsonResponse   JSON parse xhr responseText                   if  jsonResponse status    1                          jsonResponse file info  each function                              Iterate through response and find data corresponding to each file uploaded                         var uploaded file name   this original                          var saved file name   this target                          var file name input     lt input type  hidden  class  image name  name  image names    value     saved file name       gt                            file info container append file name input                            imageCount--                                               Decrement count of inputs to find all images selected by all multi select are uploaded                     number of inputs--                      if number of inputs    0                              All images selected by each file selector is uploaded                           Do necessary acteion post upload                             overlay   hide                                            else                       if  typeof jsonResponse error field name     undefined                               Do appropriate error action                       else                           alert jsonResponse message                                                 overlay   hide                        event preventDefault                        return false                                  else                     alert  Something went wrong                           overlay   hide                    event preventDefault                                     xhr send formData               return false

User · Answer

If you want to upload file using AJAX here is code which you can use for file uploading     document  ready function         var options                      beforeSubmit   showRequest          success        showResponse          dataType   json                      body   delegate   image   change   function                upload   ajaxForm options  submit                              function showRequest formData  jqForm  options             validation-errors   hide   empty            output   css  display   none        return true      function showResponse response  statusText  xhr   form          if response success    false                var arr   response errors            each arr  function index  value                        if  value length    0                                    validation-errors   append   lt div class  alert alert-error  gt  lt strong gt    value    lt  strong gt  lt div gt                                           validation-errors   show          else                output   html   lt img src    response file      gt                  output   css  display   block              Here is the HTML for Upload the file   lt form class  form-horizontal  id  upload  enctype  multipart form-data  method  post  action  upload image   autocomplete  off  gt       lt input type  file  name  image  id  image    gt    lt  form gt

User · Answer

I m pretty late for this but I was looking for an ajax based image uploading solution and the answer I was looking for was kinda scattered throughout this post  The solution I settled on involved the FormData object  I assembled a basic form of the code I put together  You can see it demonstrates how to add a custom field to the form with fd append   as well as how to handle response data when the ajax request is done   Upload html    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Image Upload Form lt  title gt       lt script src    code jquery com jquery-1 9 1 js  gt  lt  script gt       lt script type  text javascript  gt          function submitForm                 console log  submit event                var fd   new FormData document getElementById  fileinfo                 fd append  label    WEBUPLOAD                  ajax                 url   upload php                 type   POST                 data  fd                processData  false      tell jQuery not to process the data               contentType  false      tell jQuery not to set contentType                done function  data                     console log  PHP Output                     console log  data                                return false                 lt  script gt   lt  head gt    lt body gt       lt form method  post  id  fileinfo  name  fileinfo  onsubmit  return submitForm     gt           lt label gt Select a file  lt  label gt  lt br gt           lt input type  file  name  file  required   gt           lt input type  submit  value  Upload    gt       lt  form gt       lt div id  output  gt  lt  div gt   lt  body gt   lt  html gt    In case you are working with php here s a way to handle the upload that includes making use of both of the custom fields demonstrated in the above html   Upload php   lt  php if    POST  label           label     POST  label       allowedExts   array  gif    jpeg    jpg    png     temp   explode        FILES  file    name      extension   end  temp   if      FILES  file    type       image gif         FILES  file    type       image jpeg         FILES  file    type       image jpg         FILES  file    type       image pjpeg         FILES  file    type       image x-png         FILES  file    type       image png     amp  amp     FILES  file    size    lt  200000   amp  amp  in array  extension   allowedExts         if    FILES  file    error    gt  0            echo  Return Code        FILES  file    error       lt br gt          else            filename    label   FILES  file    name            echo  Upload        FILES  file    name       lt br gt            echo  Type        FILES  file    type       lt br gt            echo  Size         FILES  file    size     1024      kB lt br gt            echo  Temp file        FILES  file    tmp name       lt br gt             if  file exists  uploads      filename                 echo  filename     already exists               else               move uploaded file   FILES  file    tmp name                 uploads      filename               echo  Stored in       uploads      filename                    else       echo  Invalid file       gt

User · Answer

to upload a file which is submitted by user as a part of form using jquery please follow the below code    var formData   new FormData    formData append  userfile   fileInputElement files 0      Then send the form data object to server   We can also append a File or Blob directly to the FormData object   data append  myfile   myBlob   filename txt

User · Answer

Simple Upload Form   x000D   x000D    lt script gt  x000D       form Submit x000D        form   submit function evt     x000D        evt preventDefault    x000D        var formData   new FormData   this  0    x000D       ajax   x000D         url   fileUpload   x000D         type   POST   x000D         data  formData  x000D         async  false  x000D         cache  false  x000D         contentType  false  x000D         enctype   multipart form-data   x000D         processData  false  x000D         success  function  response    x000D           alert response   x000D           x000D         x000D     return false  x000D       x000D   lt  script gt  x000D   lt  --Upload Form-- gt  x000D   lt form gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td colspan  2  gt File Upload lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt Select File  lt  th gt  x000D         lt td gt  lt input id  csv  name  csv  type  file    gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt  x000D           lt input type  submit  value  submit   gt   x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Using FormData is the way to go as indicated by many answers   here is a bit of code that works great for this purpose   I also agree with the comment of nesting ajax blocks to complete complex circumstances   By including e PreventDefault    in my experience makes the code more cross browser compatible            UploadB1   click function e               e preventDefault         if   fileupload valid              return false                         var myformData   new FormData                myformData append  file       uploadFile   0  files 0             UpdateMessage5   html  Uploading file                 UpdateMessage5   css  background   url    include images loaderIcon gif  no-repeat right         myformData append  mode    fileUpload        myformData append  myid       myid   val         myformData append  type       fileType   val           formData append  myfile   file  file name           ajax           url   include fetch php           method   post           processData  false          contentType  false          cache  false          data  myformData          enctype   multipart form-data           success  function response                   UpdateMessage5   html response      delay 2000  hide 1                    UpdateMessage5   css  background                    console log  file successfully submitted              error  function                console log  not okay

User · Answer

Here was an idea i was thinking of   Have an iframe on page and have a referencer    Have a form in which you move the INPUT File element to   Form   A processing page AND a target of the FRAME    The result will post to the frame  and then you can just send the fetched data up a level to the image tag you want with something like   data image png base64 asdfasdfasdfasdfa   and the page loads   I believe it works for me  and depending you might be able to do something like    aftersubmit function        stopPropigation     or some other code which would prevent a refresh

[javascript] jQuery Ajax File Upload

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to post

Examples related to file-upload