1

Trato de guardar una imagen en una carpeta del servidor y despues guardar la ruta en mi DB para posteriormente mostrarla en una tabla html.

Estoy trabajando con MySQL, PHP y AJAX. He visto varias manera de hacerlo en la web pero no he podido solucionar.

me genera un error en el archivo nueva categoria en el insert.

Este es el codigo registro_categorias.php:

<?php
    if (isset($con))
    {
?>
<!-- Modal -->
<div class="modal fade" id="nuevoCliente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><i class='glyphicon glyphicon-edit'></i> Agregar nuevo catalogo</h4>
      </div>
      <div class="modal-body">
      <form class="form-horizontal" method="post" id="guardar_categoria" name="guardar_categoria" enctype="multipart/form-data">
        <div id="resultados_ajax"></div>

         <div class="form-group">
            <label for="foto" class="col-sm-3 control-label">Foto</label>
            <div class="col-sm-8">
              <input type="file" class="form-control" id="foto" name="foto">
            </div>
          </div>

          <div class="form-group">
            <label for="nombre" class="col-sm-3 control-label">Nombre</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="nombre" name="nombre" required>
            </div>
          </div>


          <div class="form-group">
            <label for="descripcion" class="col-sm-3 control-label">Descripción</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="descripcion" name="descripcion"   maxlength="255" ></textarea>

            </div>
          </div>             

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary" id="guardar_datos">Guardar datos</button>
      </div>
      </form>
    </div>
  </div>
</div>
<?php
    }
?>

El archivo donde ejecuta el ajax: categorias.js

    $(document).ready(function(){
            load(1);
        });

        function load(page){
            var q= $("#q").val();
            $("#loader").fadeIn('slow');
            $.ajax({
                url:'./ajax/buscar_categorias.php?action=ajax&page='+page+'&q='+q,
                 beforeSend: function(objeto){
                 $('#loader').html('<img src="./img/ajax-loader.gif"> Cargando...');
              },
                success:function(data){
                    $(".outer_div").html(data).fadeIn('slow');
                    $('#loader').html('');

                }
            })
        }



    function eliminar (id)
        {
        var q= $("#q").val();
        if (confirm("Realmente deseas eliminar la categoría")){ 
        $.ajax({
        type: "GET",
        url: "./ajax/buscar_categorias.php",
        data: "id="+id,"q":q,
         beforeSend: function(objeto){
            $("#resultados").html("Mensaje: Cargando...");
          },
        success: function(datos){
        $("#resultados").html(datos);
        load(1);
        }
            });
        }
        }



$( "#guardar_categoria" ).submit(function(event){
$('#guardar_datos').attr("disabled", true); 

    var datos = new FormData($("#guardar_categoria")[0])
    $("resultados_ajax").html("Mensaje: Cargando...")
    $.ajax({
        url: 'ajax/nueva_categoria.php',
        type: 'POST',
        data: datos,
        contentType: false,
        processData: false,
        success: function(datos){
            $("#resultados_ajax").html(datos);
            $('#guardar_datos').attr("disabled", false);
            load(1);
        }
    });
    event.preventDefault()
})



$( "#editar_categoria" ).submit(function( event ) {
  $('#actualizar_datos').attr("disabled", true);

 var parametros = $(this).serialize();
     $.ajax({
            type: "POST",
            url: "ajax/editar_categoria.php",
            form-data: parametros,
             beforeSend: function(objeto){
                $("#resultados_ajax2").html("Mensaje: Cargando...");
              },
            success: function(datos){
            $("#resultados_ajax2").html(datos);
            $('#actualizar_datos').attr("disabled", false);
            load(1);
          }
    });
  event.preventDefault();
})


    $('#myModal2').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var button = button.data('foto')
      var nombre = button.data('nombre') 
      var descripcion = button.data('descripcion') 
      var id = button.data('id') 
      var modal = $(this)
      modal.find('.modal-body #mod_foto').val(foto)
      modal.find('.modal-body #mod_nombre').val(nombre)
      modal.find('.modal-body #mod_descripcion').val(descripcion) 
      modal.find('.modal-body #mod_id').val(id)
    })

Y el archivo que recibe el ajax y que guarda la imagen y la ruta en la bd: nueva_categoria.php

<?php
include('is_logged.php');//Archivo verifica que el usario que intenta acceder a la URL esta logueado
/*Inicia validacion del lado del servidor*/

if(empty($_POST['nombre'])) {
       $errors[] = "Nombre vacío";  
    } else if (!empty($_POST['nombre'])){
    /* Connect To Database*/
    require_once ("../config/db.php");//Contiene las variables de configuracion para conectar a la base de datos
    require_once ("../config/conexion.php");//Contiene funcion que conecta a la base de datos
    // escaping, additionally removing everything that could be (html/javascript-) code


    $nombre=mysqli_real_escape_string($con,(strip_tags($_POST["nombre"],ENT_QUOTES)));
    $descripcion=mysqli_real_escape_string($con,(strip_tags($_POST["descripcion"],ENT_QUOTES)));                  
    $date_added=date("Y-m-d H:i:s");
    $foto=isset($_FILES["foto"]);
        if ($foto["type"] == "img/jpg" OR $foto["type"] == "img/jpeg" ) {
            $ruta = "../img".md5($foto["tmp_name"]).".jpg";   

    $sql="INSERT INTO categorias (nombre_categoria, descripcion_categoria,date_added) VALUES ('$ruta','$nombre','$descripcion','$date_added')";
    $query_new_insert = mysqli_query($con,$sql);
        if ($query_new_insert){
            move_uploaded_file($tmp_name, $ruta);
            echo "El catalogo ha sido ingresada satisfactoriamente.";
        } else{
            $errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con);
        }
    } else {
        $errors []= "Error desconocido.";
    }
    }


    if (isset($errors)){

        ?>
        <div class="alert alert-danger" role="alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Error!</strong> 
                <?php
                    foreach ($errors as $error) {
                            echo $error;
                        }

                    ?>
        </div>
        <?php
        }
        if (isset($messages)){

            ?>
            <div class="alert alert-success" role="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>¡Bien hecho!</strong>
                    <?php
                        foreach ($messages as $message) {
                                echo $message;
                            }
                        ?>
            </div>
            <?php
        }
  ?>
4
  • 5
    Hola Jeinner. ¿Podrías compartir el código con el que has trabajado de momento? Necesitaríamos un ejemplo mínimo verificable para poder ayudarte.
    – fedorqui
    el 26 jul. 2017 a las 6:38
  • Hola Jeinner, deberías indicar cual es el problema que tiene tu código ya que no queda claro que es lo que no funciona del mismo.
    – Agustin M.
    el 26 jul. 2017 a las 13:06
  • 1
    Mencionas un Error, podría describirlo o pegar el texto del mismo? el 26 jul. 2017 a las 14:20
  • El error que veo es en el insert estas pasando 4 valores y solo pides 3, deverias publicar el error que te arroja para poder ayudar, no somos adivinos
    – Kevin
    el 26 jul. 2017 a las 14:43

1 respuesta 1

1

Cuando se necesita grabar una imagen por medio de ajax dentro de un formulario, es necesario hacerlo por medio de formdata este llama todo lo que contiene la variable formdata dentro del formulario...si usas data: "id="+id,"q":q, solo tomará el texto plano y las imagenes no irán dentro de ello

Primero generas una variable dentro de la function submit que contenga todo el formulario:

var formData = new FormData($(this)[0]);

Luego lo haces llamar para que envíe por medio de la variable todo la info del formulario data:formData, ...así tu en el archivo que inserta los datos en la base de datos puedas escoger que datos son los que serán guardados

Aca te dejo un ajax funcional que envía el archivo de imagen al archivo que graba a la base.

    $("#prod_n").submit(function(){
        if($('#nombreProd').val()!= ""){
            if(!this.checkValidity || this.checkValidity()){
                var formData = new FormData($(this)[0]);
                event.preventDefault();
                $.ajax({
                    type:"POST",
                    url:"partes/productos/include/prod_n.php?ts=" + new Date().getTime(),
                    data:formData,
                    beforeSend:function(){
                        $("#np").show();
                        $("#pn").empty();
                        $('#submit').attr("disabled", true);
                    },
                    success:function(response){
                        $("#np").hide();
                        $("#pn").append(response);
                        $('#submit').attr("disabled", false);
                    },
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false
                })
                return false;
            }
        }
    });
9
  • Asterix_jv gracias por la ayuda, tengo una duda en las dos primeras lineas de tu script cambio $("#prod_n") por $("#guardar_categoria") y en if($('#nombreProd') cambio por if($('#guardar_datos') esa es la duda igual voy a prbar, muchas gracias el 26 jul. 2017 a las 17:06
  • @JeinnerMarulanda , en esta parte #prod_n es el id del formulario el cual dentro del tuyo sería "guardar_categoria" y en la parte if($('#nombreProd') cambio por if($('#guardar_datos') NO, el #nomreProd es un input requerido por lo que viendo tu formulario seria #nombre el cual es requerido dentro del formulario. en pocas palabras te está diciendo "si el input requerido con id (nombreProd) no es igual a " (no este vacio) " haga la petición de lo contrario no ejecute nada.
    – asterix_jv
    el 26 jul. 2017 a las 17:39
  • @aterix_jv queda asi pero guarda en la carpeta $("#guardar_categoria").submit(function(){ if($('#nombre').val()!= ""){ if(!this.checkValidity || this.checkValidity()){ var formData = new FormData($(this)[0]); event.preventDefault(); $.ajax({ type:"POST", url:"ajax/nueva_categoria.php?ts=" + new Date().getTime(), data:formData, beforeSend:function(){ $("#np").show(); el 26 jul. 2017 a las 19:17
  • asi es.. pero debes de poner todo el código sino no te va servir
    – asterix_jv
    el 26 jul. 2017 a las 19:39
  • si asi es yo lo puse pero no puedo copiar todo para mostrarle, no me genera error...deberia quedar en la carpeta ../img y ya despues lo llamo desde tabla html con echo. Agradezco su ayuda y disculpe la molestia el 26 jul. 2017 a las 19:47

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.