0

Necesito guardar la imagen en un directorio que yo mismo indico en el modelo ( $dir='../img/'). En la Base de Datos solo quiero guardar la ruta para luego desde la vista, indicársela (<img src='../img/<?php echo empleado->getFoto() ?>'>) y que la lea para que el usuario la visualice.

Este es el formulario:

<form name="altaEmpleados" id="formularioAltaEmpleados" action="#" method="POST" enctype="multipart/form-data">

         <label id="fotoLbl" for="foto"><i class="fas fa-camera"></i> </label>
         <input type="file" name="foto" max="1" accept="image/*" id="foto">

         <input type="hidden" name=accion id="accion" value="crearEmpleado">
         <input type="submit" name="botonAltaEmpleado" id="btn-enviar" class="boton" value="Registrar">

</form>

Recojo los datos con mi archivo javascript de la siguiente manera:

    $("#formularioAltaEmpleados").submit(function(e) {
      e.preventDefault();
      empleado = {
       foto: document.querySelector('#foto').files[0].name,
       accion: $('input[name="accion"]').val()
       console.log(empleado);
       $.post('../controller/empleadoControlador.php', empleado, function(response) {
        console.log(response);
      }).done(function() {
        alert("guardado con éxito");
      })
    }

En el controlador estoy recogiendo la foto de la siguiente manera:

$empleado = new Empleado();
        $nombreArchivo=$_FILES['foto']['name'];
        $empleado->cargarFoto($nombreArchivo); 

Con la función "cargarFoto()" llama al modelo:

public function cargarFoto($nombreArchivo)
{
    $dir='../img/';

    if (!move_uploaded_file($_FILES['foto']['tmp_name'], $dir.$nombreArchivo)) {
        echo "Debe cargar una fotografía";
        exit;
    }

    return true;
}

Y de nuevo el controlador inserta el nombre de la foto:

$foto = $empleado->setFoto($nombreArchivo);

Lo curioso de todo esto es que cuando hago un log del empleado, me da el nombre del archivo:

introducir la descripción de la imagen aquí

Pero en el log del response, me da un undefined:

introducir la descripción de la imagen aquí

¿Alguien entiende lo que está pasando? El tema de los permisos ya lo he mirado y se los he dado tanto a la carpeta raiz como a la que guarda las imágenes...

Gracias por anticipado.

5
  • 1
    Puedes actualizar tu código JS?, está mal la sintaxis en el código que has pegado. Commented el 28 dic. 2019 a las 16:39
  • 1
    Estás enviando solo el nombre del archivo y no el archivo mismo, necesitas usar formData, revisa esto: es.stackoverflow.com/questions/42604/enviar-archivo-por-ajax
    – Triby
    Commented el 28 dic. 2019 a las 18:23
  • 1
    Quizá me he explicado mal. Lo que necesito es guardar la imagen en el directorio img que tengo en mi proyecto. En la Base de Datos solo quiero guardar la ruta para que desde la vista la llame y la muestre. Commented el 28 dic. 2019 a las 18:43
  • 1
    El punto es que por POST estás enviando solo el nombre del archivo, pero en FILES no, por eso el error de índice no definido cuando haces esto: $nombreArchivo=$_FILES['foto']['name'];
    – Triby
    Commented el 28 dic. 2019 a las 22:43
  • 1
    ¿Y cómo envío tanto el file como el nombre? Estoy mirando el post que me referenciaste en el link pero no lo entiendo. Commented el 29 dic. 2019 a las 10:57

1 respuesta 1

1

Ya está!!! Era algo tan sencillo como esto:

Dentro de la función de submit, en el archivo js, recojo los datos de los campos del formulario de la siguiente manera (lo único que cambia es la línea de la foto):

  var foto = $('input[name="foto"]')[0].files[0];
  var accion = $('input[name="accion"]').val();

Después, en vez de crear un empleado {}, creo un formData:

var infoEmpleado = new FormData();

Ahora inserto los datos recogidos en mi formData:

  infoEmpleado.append('foto', foto);
  infoEmpleado.append('accion', accion);

Y lo mando por ajax:

  $.ajax({
    url: '../controller/empleadoControlador.php',
    type: 'POST',
    contentType: false,
    data: infoEmpleado, 
    processData: false,
    cache: false,
    success: function(respuestaAjax) {
      console.log(respuestaAjax);
    }
  });

El resto queda igual que estaba. Gracias!!!!

1
  • Ya está editado y bien explicado. Espero que se entienda. Gracias!! Commented el 1 ene. 2020 a las 18:31

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.