0

Este es el formulario:

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

                <input type="text" name="nombre" id="nombre" data-validation="required">

                <input type="text" name="apellidos" id="apellidos" data-validation="required">

                <input type="email" name="email" id="email" data-validation="email" data-validation-error-msg="Inserte un formato de E-mail válido">

<input type="file" name="foto" max="1" accept="image/*" id="foto">

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

    </form>

Este es el JS:

$("#formularioAltaEmpleados").submit(function(e) {

  e.preventDefault();

  var datos = $("#formularioAltaEmpleados").serialize();
  var foto = $('input[name="foto"]')[0].files[0];
  const infoEmpleado = new FormData();
  infoEmpleado.append('data', datos);
  infoEmpleado.append('file', foto);

  $.ajax({
    url: '../controller/empleadoControlador.php',
    type: 'POST',
    data: infoEmpleado,
    processData: false,
    success: function(respuestaAjax) {
      console.log(respuestaAjax);
      if (respuestaAjax == 1) {
console.log('éxito');
      } else {
console.log('error');
      }
    }
  });

});

En el controlador estoy haciendo esta prueba:

var_dump($_POST['data']);

if(isset($_POST['data']) && $_POST['data']['accion'] == 'crearEmpleado') {

  echo 'bien hecho';

}

Pero no entra en el if y el vardump me devuelve lo siguiente:

string(84) "nombre=Jorge&apellidos=apellidoejemplo&email=email%40gmail.com&accion=crearEmpleado"
1
  • He tratado de realizar lo que explicas en la otra pregunta. Edito. el 20 feb. 2020 a las 18:48

2 respuestas 2

1

En la petición Ajax te falta este parámetro para poder procesar bien el contenido en el servidor:

contentType: false,

Lo puedes poner antes del parámetro processData: false,por ejemplo.

Luego, en PHP puedes valerte de parse_str() para convertir los datos que llegarán en la parte data del objeto que estás enviando:

parse_str($_POST["data"], $data);
if($data && $data['accion'] == 'crearEmpleado') {
  echo 'bien hecho';
}

Si haces un test de $data con:

var_dump($data);

Verás que ahora tienes esto:

array(4) {
  ["nombre"]=>
  string(5) "DatoA"
  ["apellidos"]=>
  string(5) "DatoB"
  ["email"]=>
  string(12) "[email protected]"
  ["accion"]=>
  string(13) "crearEmpleado"
}

En cuanto al dato que envías en la parte file del objeto lo puedes recuperar así:

$mFile=$_FILES['file'];

A partir de ahí puedes usar $mFile. Veamos dos pruebas:

var_dump($mFile);

Salida:

array(5) {
  ["name"]=>
  string(22) "logo_letra_400x100.png"
  ["type"]=>
  string(9) "image/png"
  ["tmp_name"]=>
  string(14) "/tmp/php6BmfYm"
  ["error"]=>
  int(0)
  ["size"]=>
  int(19117)
}

Otra:

echo $mFile['name'];

Salida:

logo_letra_400x100.png
1
  • Perfecto. Está funcionado ya. En cuanto tenga un rato comparto respuesta. Muchísimas gracias por tres días de paciencia... el 21 feb. 2020 a las 9:42
0

El formulario queda igual. En el archivo JS tengo lo siguiente:

var datos = $("#formularioAltaEmpleados").serialize();
var foto = $('input[name="foto"]')[0].files[0];
const infoEmpleado = new FormData();
infoEmpleado.append('datos', datos);
infoEmpleado.append('foto', foto);

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

En el controlador se recoge de la siguiente manera:

  if (isset($_POST['datos'])) {

  parse_str($_POST["datos"], $datos);

  if($datos && $datos['accion'] == 'crearEmpleado') {

        $empleado = new Empleado();

        if (isset($_FILES['foto'])){
        $nombreArchivo=$_FILES['foto']['name'];
        $empleado->cargarFoto($nombreArchivo);//en mi caso, esta función guarda la foto.
          $foto = $empleado->setFoto($nombreArchivo);
        }else {
          $foto = $empleado->setFoto(null);
        }
        $nombre = $empleado->setNombre($datos['nombre']);
        $apellidos = $empleado->setApellidos($datos['apellidos']);
        $email = $empleado->setEmail($datos['email']);
        $empDao->insertarEmpleado($empleado);

  }
}

En el dao, además de insertar los datos en la BBDD, creo la respuesta que recoge AJAX:

    public function insertarEmpleado($empleado)
{
    $stmt = $this->db->prepare("INSERT INTO empleado (nombre, apellidos, email, foto) VALUES (?, ?, ?, ?)");
    $stmt->bindValue(1, $empleado->getNombre());
    $stmt->bindValue(2, $empleado->getApellidos());
    $stmt->bindValue(3, $empleado->getEmail());
    $stmt->bindValue(4, $empleado->getFoto());
    $resultadoRegistro = $stmt->execute();
    if ($resultadoRegistro > 0) {
      echo 1; //respuesta 1: AJAX devuelve 'Exitoso' en la consola.
    } else {
      echo 0; //respuesta 0: AJAX devuelve 'Error' en la consola.
    }
}

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