Jquery und HTML FormData geben "Uncaught TypeError: Illegal Invocation" zurück.

82

Ich verwende dieses Skript, um meine Bilddateien hochzuladen: 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
    });
  });
});

Wenn ich jedoch auf die Schaltfläche zum Hochladen klicke, gibt die JavaScript-Konsole diesen Fehler zurück:

Uncaught TypeError: Illegal invocation

jQuery-Fehler

Können Sie mir helfen?

jquery ajax html upload Caio Tarifa
quelle
Bist du dir da sicher? dataType: 'json',???
Praveen Kumar Purushothaman
1
Ja, die URL wird in diesem Format zurückgegeben.
Caio Tarifa
In meinem Fall wollte ich eine Datei als Teil eines größeren Datensatzes an einen .NET MVC-Controller senden, der ein serialisiertes Objekt als Parameter für seine Aktion akzeptiert. Es war notwendig, ein FormData-Objekt zu verwenden, wie von lilalinux vorgeschlagen , sowie processData: false, wie von Blender vorgeschlagen , und auch contentType: false , wie von Caio Tarifa vorgeschlagen . Alles andere als alle drei funktionierte nicht. Siehe [diese Antwort] ( stackoverflow.com/a/3
nbrosz

Antworten:

168

jQuery verarbeitet das dataAttribut und konvertiert die Werte in Zeichenfolgen.

Das HinzufügenprocessData: false zu Ihrem Optionsobjekt behebt den Fehler, aber ich bin nicht sicher, ob es das Problem behebt.

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

Mixer
quelle
Vielen Dank, aber ich muss diese Eigenschaft entfernen, siehe folgende Frage: stackoverflow.com/questions/12431760/… .
Caio Tarifa
21
Ich behebe es, füge es einfach hinzu contentType: false. Danke noch einmal!
Caio Tarifa
@Blender Der gleiche Code funktioniert in meinem System, aber nicht in meinen Freunden (beide verwenden Windows 10). Die Datei wird nicht veröffentlicht. Kein Fehler in der Konsole.
Suchit Kumar
3
In meinem Fall war das Problem, dass ich var data = {} verwendet habe; Sie müssen jedoch var data = new FormData () verwenden.
Lilalinux
Ich konnte nicht herausfinden, warum dies nicht funktionierte ... bis mir klar wurde, dass der Prozess mit eins cund nicht mit zwei geschrieben ist.
Yaakov Ainspan
16

Ich hatte das gleiche Problem, das ich mit zwei Optionen behoben habe

contentType: false
processData: false

Eigentlich habe ich diese beiden Befehle zu meiner Funktion $ .ajax ({}) hinzugefügt

Hamid
quelle
1
Können diese mit $ .post verwendet werden? Wenn das so ist, wie??
Alex
8

Durch Hinzufügen processData: falsezu den $.ajaxOptionen wird dieses Problem behoben.

Anup Shetty
quelle
3

Meine Erfahrung:

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

Das Problem ist, dass ich vergessen habe, .val () am Ende von $ ('# myInputField') hinzuzufügen; Durch diese Aktion verschwende ich Zeit damit, herauszufinden, was falsch war, was zu einem illegalen Aufruffehler führt, da sich $ ('# myInputField') in einer anderen Datei befand als das System, das auf falschen Code hingewiesen hat. Hoffe, diese Antwort hilft den Kollegen im gleichen Fehler, Zeit zu verlieren.

Nowdeen
quelle
-1

In meinem Fall gab es einen Fehler in der Liste der Parameter war nicht gut formuliert. Stellen Sie also sicher, dass die Parameter gut geformt sind. Für zB korrektes Format von Parametern

data: {'reporter': reporter,'partner': partner,'product': product}
Deepak Srivastav
quelle