2

Tengo un formulario para un registro, el cual contiene varios inputs para el nick, email, password y recientemente una imagen. Hay un botón de submit que no se ejecuta directamente, si no que el evento es atrapado con jquery y detenido ```event.preventDefault```

Obtengo la imagen de la siguiente manera:
const imgDoc = $("#input-img")[0].files;

La petición es la siguiente:

$.ajax({
method: "POST",
url: `/register`,
data: { email, nick, password, img },
success: function () {
  window.location.href = "http://localhost:3000/login";
},
error: function () {
  $("form span:last-child").css("display", "block");
},
});

Siendo img = imgDoc

El error que arrojaes el siguiente:
introducir la descripción de la imagen aquí

¿Qué puede ser? Hay una respuesta a esta misma pregunta o una muy parecida, pero no logro entender la solución. Por sí ayuda lo dejo aquí: https://stackoverflow.com/questions/35872448/jquery-post-blob-object-gives-uncaught-typeerror-illegal-invocation

He probado varias soluciones más:

Incluirle a la petición ajax
mimeType: 'image'
Y formar el formData de la siguente manera: var datosSolicitud = new FormData(document.getElementById("input-img"));

Pero sigue sin funcionar y salta el siguiente error:

'Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
3
  • 2
    Ya intentaste con FormData()?
    – alanfcm
    Commented el 13 dic. 2021 a las 23:49
  • Si uso: ``` let formData = new FormData(); formData.append("myImg", img); ``` y en la petición pongo ' data: formData ', me sale el error de Ilegal invocation Commented el 14 dic. 2021 a las 0:00
  • 1
    Si es un formulario y estas usando formData() es innecesario tratar de agregar las imágenes con .append ya que formData() recoge todos los campos siempre y cuando estén bien maquetados en el HTML. Revisa esta pregunta y su respectiva respuesta para que te des una idea de cómo funciona.
    – DjCrazy
    Commented el 14 dic. 2021 a las 4:10

2 respuestas 2

1

Respondiendo a tu pregunta, podrías hacerlo con javascript puro.

Ejemplo:

const form = document.querySelector("form"),
button = document.getElementById("btn");

button.onclick = () =>{
  let xhr = new XMLHttpRequest();
  
  xhr.open("POST", "/register");
  xhr.onload = ()=>{
    //window.location.href = "http://localhost:3000/login";
    console.log("success")
  }
  xhr.onerror = ()=>{
    //form.style.display = "block"
    console.log("error")
  }
  let newForm = new FormData(form);
  xhr.send(newForm);
}
<form>
  <input name="files" type="file">
  <input name="texto" type="text" placeholder="Escribe algo...">
  <input id="btn" type="button" value="enviar">
</form>

Espero que te ayude este código, yo por mi parte no soy de usar librerías, ya que son muy limitadas.

1

Si estás enviando datos con un <form> entonces tienes que crear un formData

Ejemplo:

const form = document.getElementById("form");

const formData = new FormData(form);


$.ajax({
  method: "POST",
  url: `/register`,
  data: formData,
  enctype: 'multipart/form-data',
  success: function() {
    window.location.href = "http://localhost:3000/login";
  },
  error: function() {
    $("form span:last-child").css("display", "block");
  },
});

Espero haberte ayudado!

1
  • He reproducido tu ejemplo exacto (cogiendo el id verdadero del form) pero sigue sin funcionar. Error: Uncaught TypeError: Illegal invocation ¿Da igual la estructura que tenga el html del form? Commented el 14 dic. 2021 a las 15:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.