Jquery y HTML FormData devuelve "Error de tipo no detectado: invocación ilegal"

82

Estoy usando este script para cargar mis archivos de imagen: 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
    });
  });
});

Pero cuando hago clic en el botón de carga, la consola de JavaScript devuelve este error:

Uncaught TypeError: Illegal invocation

Error de jQuery

¿Me puedes ayudar?

jquery ajax html upload Caio Tarifa
fuente
¿Estas seguro acerca de esto? dataType: 'json',???
Praveen Kumar Purushothaman
1
Sí, la URL volverá en este formato.
Caio Tarifa
En mi caso, quería enviar un archivo como parte de un conjunto de datos más grande a un controlador .NET MVC que aceptaba un objeto serializado como parámetro para su acción. Era necesario utilizar un objeto FormData, como sugirió lilalinux , así como processData: false, como sugirió Blender , y también contentType: false , como sugirió Caio Tarifa . Nada menos que los tres no funcionó. Vea [esta respuesta] ( stackoverflow.com/a/3
nbrosz

Respuestas:

169

jQuery procesa el dataatributo y convierte los valores en cadenas.

AgregarprocessData: false a su objeto de opciones corrige el error, pero no estoy seguro de si soluciona el problema.

Demostración: http://jsfiddle.net/eHmSr/1/

Licuadora
fuente
Gracias, pero necesito eliminar esta propiedad, vea esta pregunta: stackoverflow.com/questions/12431760/… .
Caio Tarifa
22
Lo arreglo, solo agrego contentType: false. ¡Gracias de nuevo!
Caio Tarifa
@Blender Este mismo código está funcionando en mi sistema pero no en mis amigos (ambos usan Windows 10), el archivo no se publica No hay error en la consola
Suchit kumar
3
En mi caso, el problema fue que usé var data = {}; Sin embargo, debe utilizar var data = new FormData ();
lilalinux
No pude entender por qué esto no funcionaba ... hasta que me di cuenta de que el proceso se escribe con uno c, no con dos.
Yaakov Ainspan
16

Tuve el mismo problema que solucioné con el uso de dos opciones

contentType: false
processData: false

En realidad, agregué estos dos comandos a mi función $ .ajax ({})

Hamid
fuente
1
¿Se pueden usar con $ .post? ¿¿si es así, cómo??
Alex
8

Añadiendo processData: falsea las $.ajaxopciones van a resolver ese problema.

Anup Shetty
fuente
3

Mi experiencia:

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

El problema es que olvidé agregar .val () al final de $ ('# myInputField'); esta acción me hace perder el tiempo tratando de averiguar qué estaba mal, lo que provocó un Error de invocación ilegal , ya que $ ('# myInputField') estaba en un archivo diferente al que el sistema señaló un código incorrecto. Espero que esta respuesta ayude a los compañeros en el mismo error para evitar perder tiempo.

Nowdeen
fuente
-1

En mi caso, hubo un error en la lista de los parámetros que no estaba bien formada. Así que asegúrese de que los parámetros estén bien formados. Por ejemplo, formato correcto de parámetros

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