CODEWITHSUNDEEP
jqueryajaxhtmlupload
Caio Tarifa
Caio Tarifa

Reputation: 6043

jQuery and HTML FormData returns "Uncaught TypeError: Illegal invocation"

I'm using this script to upload my image files: http://jsfiddle.net/eHmSr/

$('.uploader input:file').on('change', function() {
  $this = $(this);

  $('.alert').remove();

  $.each($this[0].files, function(key, file) {
    $('.files').append('<li>' + file.name + '</li>');

    data = new FormData();
    data.append(file.name, file);

    $.ajax({
      url: $('.uploader').attr('action'),
      type: 'POST',
      dataType: 'json',
      data: data
    });
  });
});

But when I click in upload button, the JavaScript console returns this error:

Uncaught TypeError: Illegal invocation

jQuery Error

Can you help me?

Upvotes: 89

Views: 128243

Answers (5)

Hamid
Hamid

Reputation: 908

I had the same problem

I fixed that by using two options

contentType: false
processData: false

Actually I Added these two command to my $.ajax({}) function

Upvotes: 23

Deepak Srivastav
Deepak Srivastav

Reputation: 1

In my case, there was a mistake in the list of the parameters was not well formed. So make sure the parameters are well formed. For e.g. correct format of parameters

data: {'reporter': reporter,'partner': partner,'product': product}

Upvotes: -2

Nowdeen
Nowdeen

Reputation: 1440

My experience:

  var text = $('#myInputField');  
  var myObj = {title: 'Some title', content: text};  
  $.post(myUrl, myObj, callback);

The problem is that I forgot to add .val() to the end of $('#myInputField'); this action makes me waste time trying to figure out what was wrong, causing Illegal Invocation Error, since $('#myInputField') was in a different file than that system pointed out incorrect code. Hope this answer help fellows in the same mistake to avoid to loose time.

Upvotes: 3

Anup Shetty
Anup Shetty

Reputation: 571

Adding processData: false to the $.ajax options will fix this issue.

Upvotes: 8

Blender
Blender

Reputation: 298246

jQuery processes the data attribute and converts the values into strings.

Adding processData: false to your options object fixes the error, but I'm not sure if it fixes the problem.

Demo: http://jsfiddle.net/eHmSr/1/

Upvotes: 180

Related Questions