JQuery и HTML FormData возвращает «Uncaught TypeError: Illegal invocation»

83

Я использую этот скрипт для загрузки файлов изображений: 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
    });
  });
});

Но когда я нажимаю кнопку загрузки, консоль JavaScript возвращает эту ошибку:

Uncaught TypeError: Illegal invocation

Ошибка jQuery

Вы можете мне помочь?

jquery ajax html upload Кайо Тарифа
источник
Ты уверен насчет этого? dataType: 'json',???
Правин Кумар Пурушотаман
1
Да, URL вернется в этом формате.
Caio Tarifa
В моем случае я хотел отправить файл как часть большего набора данных в .NET MVC Controller, который принял сериализованный объект в качестве параметра своего действия. Было необходимо использовать объект FormData, как было предложено lilalinux , а также processData: falseкак было предложено Blender , а также contentType: false как было предложено Caio Tarifa . Все, что меньше всех трех , не работает. См. [Этот ответ] ( stackoverflow.com/a/3
nbrosz

Ответы:

169

jQuery обрабатывает dataатрибут и преобразует значения в строки.

ДобавлениеprocessData: false к вашему объекту параметров устраняет ошибку, но я не уверен, устраняет ли это проблему.

Демо: http://jsfiddle.net/eHmSr/1/

Блендер
источник
Спасибо, но мне нужно удалить это свойство, см. Этот вопрос: stackoverflow.com/questions/12431760/… .
Caio Tarifa
22
Исправляю, просто добавляю contentType: false. Еще раз спасибо!
Caio Tarifa
@Blender Этот же код работает в моей системе, но не у моих друзей (оба используют Windows 10), файл не публикуется. В консоли нет ошибок.
Сучит кумар
3
В моем случае проблема заключалась в том, что я использовал var data = {}; Однако вы должны использовать var data = new FormData ();
lilalinux
Я не мог понять, почему это не работает ... пока я не понял, что процесс записывается с одним c, а не с двумя.
Яаков Эйнспан
19

У меня такая же проблема

Я исправил это, используя два варианта

contentType: false
processData: false

На самом деле я добавил эти две команды в свою функцию $ .ajax ({})

Хамид
источник
1
Можно ли их использовать с $ .post? если да как ??
Alex
8

Добавление processData: falseк $.ajaxпараметрам устранит эту проблему.

Ануп Шетти
источник
3

Мой опыт:

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

Проблема в том, что я забыл добавить .val () в конец $ ('# myInputField'); это действие заставляет меня тратить время на попытки выяснить, что было не так, вызывая ошибку Illegal Invocation Error , поскольку $ ('# myInputField') находился в другом файле, чем эта система указала неверный код. Надеюсь, этот ответ поможет товарищам, совершившим ту же ошибку, не потерять время.

Nowdeen
источник
-2

В моем случае произошла ошибка, список параметров был неправильно сформирован. Поэтому убедитесь, что параметры сформированы правильно. Например, для правильного формата параметров

data: {'reporter': reporter,'partner': partner,'product': product}
Дипак Шривастав
источник