0

Tengo la base de datos con image como longblob.

introducir la descripción de la imagen aquí

En html lo tengo de esta forma usando bootstrap5:

<div class="col-md-3 position-relative" title="Fotografia">
 <figure class="figure">

  <figcaption class="figure-caption">

<label for="image" id="contenedor_img">
<img id="img" class="image" src="noimagen.png">
<input type="file" name="image" id="image" class="figure-img img-fluid rounded form-control form-control-sm" aria-label="file example" required accept="image/*" onchange="mostrar()" style="display:none;"/>
</label>

  </figcaption>
</figure>
<div class="invalid-feedback">Ingresa una foto</div>
    <div class="invalid-tooltip">
      Ingresa una foto.
    </div>
  </div>

<button class="btn btn-primary" type="submit" id="btn_salvar" onclick="salvar();">Salvar</button>

En un archivo separado de funciones.js tengo el ajax:

    function salvar(){
            var id_nombre = $("#id_nombre").val();            
            var id_genero = $('input[name="radio-stacked"]:checked').val();
            var id_estado_civil  = $("#id_estado_civil").val();
            var id_sucursal  = $("#id_sucursal").val();
            var id_area  = $("#id_area").val();
            var id_puesto  = $("#id_puesto").val();
            var id_fecha_nacimiento  = $("#id_fecha_nacimiento").val();
            var edad  = $("#edad").val();
            var id_talla  = $("#id_talla").val();
            var calzado  = $("#calzado").val();
            var fechainicio  = $("#fechainicio").val();
            var id_tipo_sangre  = $("#id_tipo_sangre").val();
            var id_curp  = $("#id_curp").val();
            var id_rfc  = $("#id_rfc").val();
            var telefono  = $("#telefono").val();
            var correo  = $("#correo").val();
            var direccion  = $("#direccion").val();
            var notas  = $("#notas").val();

              var image = document.getElementById('image');

        $.ajax({
            url: "salvar.php",
            type: "POST",
            data: { 
                id_nombre: id_nombre,
                id_genero: id_genero,
                id_estado_civil: id_estado_civil,
                id_sucursal: id_sucursal,
                id_area: id_area,
                id_puesto: id_puesto,
                id_fecha_nacimiento: id_fecha_nacimiento,
                edad: edad,
                id_talla: id_talla,
                calzado: calzado,
                fechainicio: fechainicio,
                id_tipo_sangre: id_tipo_sangre,
                id_curp: id_curp,
                id_rfc: id_rfc,
                telefono: telefono,
                correo: correo,
                direccion: direccion,
                notas: notas,
                
                  image: image
  
                 },            
            success: function(respuesta_actualiza) {            
                alert("Registrado");                
            },
            error: function() {
                console.log("No se ha podido obtener la información");
            }
          });
    }

En el archivo salvar.php tengo el codigo siguiente:

<?php

$pdo = new PDO('mysql:host=localhost;dbname=backend', 'root', '');

            $id_nombre               = $_POST['id_nombre'];
            $id_genero           = $_POST['id_genero'];
            $id_estado_civil     = $_POST['id_estado_civil'];
            $id_sucursal         = $_POST['id_sucursal'];
            $id_area             = $_POST['id_area'];
            $id_puesto           = $_POST['id_puesto'];
            $id_fecha_nacimiento = $_POST['id_fecha_nacimiento'];
            $edad                = $_POST['edad'];
            $id_talla            = $_POST['id_talla'];
            $calzado             = $_POST['calzado'];
            $fechainicio         = $_POST['fechainicio'];
            $id_tipo_sangre      = $_POST['id_tipo_sangre'];
            $id_curp             = $_POST['id_curp'];
            $id_rfc              = $_POST['id_rfc'];
            $telefono            = $_POST['telefono'];
            $correo              = $_POST['correo'];
            $direccion           = $_POST['direccion'];
            $notas               = $_POST['notas'];
            
              $image               = $_POST['image'];

    $sql = "INSERT INTO personal ( 
    nombre,
    id_genero,
    id_estado_civil,
    id_sucursal,
    id_area,
    id_puesto,
    fecha_nacimiento,
    edad,
    id_talla,
    calzado,
    fechainicio,
    id_tipo_sangre,
    curp,
    rfc,
    telefono,
    correo,
    direccion,
    notas,
  
            image

    ) VALUES ( ?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?, ? )";
    $pdo->prepare($sql)->execute([ 
        $id_nombre,
        $id_genero,
        $id_estado_civil,
        $id_sucursal,
        $id_area,
        $id_puesto,
        $id_fecha_nacimiento,
        $edad,
        $id_talla,
        $calzado,
        $fechainicio,
        $id_tipo_sangre,
        $id_curp,
        $id_rfc,
        $telefono,
        $correo,
        $direccion,
        $notas,
    
          $image

         ]);

?>

Pero al final no logro guardar la imagen blob en la base de datos. Solo requiero como pasar correctamente del input file a ajax y de ahi a php y salvarlo en la base de datos. Pero no quiero usar el form por el momento me causa mas problemas.

Soy nuevo en este tipo de programación.

Si alguien puede asesorarme se lo agradecere.

13
  • Con el formulario es más simple, pero bueno. Para enviar archivos tienes que: 1. indicar que los datos son multipart (esto es más simple declarándolo en el enctype del formulario), si no tendrás que indicarlo en forma de encabezados en tu petición Ajax; 2. En el parámetro data de Ajax tienes que enviar un objeto FormData ; 3. En el servidor, los archivos (entre ellos la imagen) no se encontrarían en el $_POST, si no en $_FILES (eso es lo que significa multipart), cuando van adjuntos, los datos van en varias partes, digamos, por un lado los datos simples y por otro los archivos.
    – A. Cedano
    Commented el 12 feb. 2021 a las 20:06
  • 1.- <form accept-charset="utf-8" method="POST" id="enviarformulario" enctype="multipart/form-data" class="row g-3 needs-validation" novalidate>
    – israjakez
    Commented el 12 feb. 2021 a las 20:10
  • 2 & 3.- ¡No se como hacerlo!. Disculpa soy nuevo en esto.
    – israjakez
    Commented el 12 feb. 2021 a las 20:12
  • Este tema ha sido tratado ya en varias preguntas/respuestas aquí, aunque los escenarios no sean exactamente los mismos. Te dejo aquí algunas: Resp. 1, también, Resp. 2, con indicaciones sobre manejo en PHP, y además, Resp. 3 explica cómo adjuntar varios archivos. Creo que revisando esos ejemplos y otros podrás formarte una idea y salir adelante y si te quedas bloqueado en algo puedes preguntar aquí. Te refiero a esas respuestas como punto de partida.
    – A. Cedano
    Commented el 12 feb. 2021 a las 20:17
  • Por ejemplo, una de las ventajas de usar FormData es que, si lanzas la petición Ajax desde un evento submit del formulario y necesitas enviar todos los datos del formulario, haciendo esto los estarías recogiendo todos: var formData = new FormData(this); y luego pasarías la variable formData en el parámetro data de la petición Ajax (eso se explica en la Resp. 1) . En el primer bloque de código de esa respuesta hay un ejemplo completo sobre esa forma de trabajar con FormData.
    – A. Cedano
    Commented el 12 feb. 2021 a las 20:23

1 respuesta 1

0

function salvar(event) {
  //event.preventDefault();    
  /*Se crea el objeto vacío*/
  var formData = new FormData();

  var nombre = document.getElementById('id_nombre').value;
  /* ----------------------------------------------------------------- */
  //    var id_genero = document.getElementByname('radio-stacked').value;
  var id_estado_civil = document.getElementById('id_estado_civil').value;
  var id_sucursal = document.getElementById('id_sucursal').value;
  var id_area = document.getElementById('id_area').value;
  var id_puesto = document.getElementById('id_puesto').value;
  var id_fecha_nacimiento = document.getElementById('id_fecha_nacimiento').value;
  var edad = document.getElementById('edad').value;
  var id_talla = document.getElementById('id_talla').value;
  var calzado = document.getElementById('calzado').value;
  var fechainicio = document.getElementById('fechainicio').value;
  var id_tipo_sangre = document.getElementById('id_tipo_sangre').value;
  var id_curp = document.getElementById('id_curp').value;
  var id_rfc = document.getElementById('id_rfc').value;
  var telefono = document.getElementById('telefono').value;
  var correo = document.getElementById('correo').value;
  var direccion = document.getElementById('direccion').value;
  var notas = document.getElementById('notas').value;
  /* ***************************************************************** */

  /*OJO: No se usa value para los input file*/
  var photo = document.getElementById('image').files[0];

  /*Agregamos los datos por separado*/
  formData.append('nombre', nombre);
  /* ----------------------------------------------------------------- */
  //    formData.append('radio-stacked',genero);
  formData.append('id_estado_civil', id_estado_civil);
  formData.append('id_sucursal', id_sucursal);
  formData.append('id_area', id_area);
  formData.append('id_puesto', id_puesto);
  formData.append('id_fecha_nacimiento', id_fecha_nacimiento);
  formData.append('edad', edad);
  formData.append('id_talla', id_talla);
  formData.append('calzado', calzado);
  formData.append('fechainicio', fechainicio);
  formData.append('id_tipo_sangre', id_tipo_sangre);
  formData.append('id_curp', id_curp);
  formData.append('id_rfc', id_rfc);
  formData.append('telefono', telefono);
  formData.append('correo', correo);
  formData.append('direccion', direccion);
  formData.append('notas', notas);
  /* ***************************************************************** */

  formData.append('img', photo);

  $.ajax({
      url: 'salvar.php',
      method: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      dataType: "html"

    })
    .done(function(res) {
      $('#respuesta').html(res)
    })
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log(nombre);
    });

};
<?php

$db = new PDO('mysql:host=localhost;dbname=backend', 'root', '');

        $nombre = $_POST['nombre']; 
/* ----------------------------------------------------------------- */
//      $id_genero           = $_POST['id_genero'];
        $id_estado_civil     = $_POST['id_estado_civil'];
        $id_sucursal         = $_POST['id_sucursal'];
        $id_area             = $_POST['id_area'];
        $id_puesto           = $_POST['id_puesto'];
        $id_fecha_nacimiento = $_POST['id_fecha_nacimiento'];
        $edad                = $_POST['edad'];
        $id_talla            = $_POST['id_talla'];
        $calzado             = $_POST['calzado'];
        $fechainicio         = $_POST['fechainicio'];
        $id_tipo_sangre      = $_POST['id_tipo_sangre'];
        $id_curp             = $_POST['id_curp'];
        $id_rfc              = $_POST['id_rfc'];
        $telefono            = $_POST['telefono'];
        $correo              = $_POST['correo'];
        $direccion           = $_POST['direccion'];
        $notas               = $_POST['notas'];
/* ----------------------------------------------------------------- */
        $name = $_FILES['img']['name'];
        $type = $_FILES['img']['type'];
        $data = file_get_contents($_FILES['img']['tmp_name']);
/* ----------------------------------------------------------------- */
    $stmt = $db->prepare("INSERT INTO personal (
        nombre,
        id_estado_civil,
        id_sucursal,
        id_area,
        id_puesto,
        fecha_nacimiento,
        edad,
        id_talla,
        calzado,
        fechainicio,
        id_tipo_sangre,
        curp,
        rfc,
        telefono,
        correo,
        direccion,
        notas,
        image
    )
        VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");

    $stmt->bindParam(1,$nombre);
/* ----------------------------------------------------------------- */
    $stmt->bindParam(2,$id_estado_civil);
    $stmt->bindParam(3,$id_sucursal);
    $stmt->bindParam(4,$id_area);
    $stmt->bindParam(5,$id_puesto);
    $stmt->bindParam(6,$id_fecha_nacimiento);
    $stmt->bindParam(7,$edad);
    $stmt->bindParam(8,$id_talla);
    $stmt->bindParam(9,$calzado);
    $stmt->bindParam(10,$fechainicio);
    $stmt->bindParam(11,$id_tipo_sangre);
    $stmt->bindParam(12,$id_curp);
    $stmt->bindParam(13,$id_rfc);
    $stmt->bindParam(14,$telefono);
    $stmt->bindParam(15,$correo);
    $stmt->bindParam(16,$direccion);
    $stmt->bindParam(17,$notas);
/* ----------------------------------------------------------------- */
    $stmt->bindParam(18,$data);
/* ----------------------------------------------------------------- */
    $stmt->execute();

?>

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.