How to upload a file using jQuery.ajax and FormData

Question

When I use XMLHttpRequest, a file is correctly uploaded using FormData. However, when I switch to jQuery.ajax, my code breaks.

This is the working original code:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.send(fd);
}

Here is my unsuccessful jQuery.ajax attempt:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

What am I doing wrong? How can I get the file to be uploaded correctly, using AJAX?

Rob W · Accepted Answer · 2012-03-08 18:40:03Z

173

You have to add processData:false,contentType:false to your method, so that jQuery does not alter the headers or data (which breaks your current code).

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}

answered Mar 8, 2012 at 18:40

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

sqram Over a year ago

I'd upvote this 1000 times if i could. Out of all the other answers to this question on SO, this one worked the best and is the simplest. thanks.

Scott D. Strader Over a year ago

Warning: FormData is not supported in IE until version 10.

user1469270 Over a year ago

In this answer (and question), what is blobFile? Is it an input.val()?

Rob W Over a year ago

@tmyie It is a Blob or File object, e.g. for <input type="file" id="filechooser"> it is document.getElementById('filechooser').files[0] (provided that the user has selected a file). (in jQuery, $('#filechooser')[0].files[0])

Rob W Over a year ago

@MarceloBarbosa fd.append('field_name', 'string_field_value'); - see developer.mozilla.org/en-US/docs/Web/API/FormData

|

marc_s · Accepted Answer · 2021-04-20 14:08:00Z

0

If you are uploading from a HTML5 form that includes an input fo type file you can just use querySelector and FormData and it works.

In case of php it will give you all files in the $_FILE and all other inputs in the $_POST array.

JS/jQuery:

function safeFormWithFile()
{
  var fd = new FormData(document.querySelector('#myFormName'));

  $.ajax({
        url:'/catchFormData.php',
        method:'POST',
        data:fd,
        processData: false,
        contentType: false,
        success:function(data){
          console.log(data);
        }
  });
}

HTML:

<form id="myFormName">
  <input id="myImage" name="myImage" type="file">
  <input id="myCaption" name="myCaption" type="text">
</form>

edited Apr 20, 2021 at 14:08

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 20, 2021 at 12:49

Max

2,6431 gold badge28 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to upload a file using jQuery.ajax and FormData

2 Answers 2

18 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

18 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related