0

tengo un formulario en donde quiero subir imagenes, he leído acerca de ello y yo estoy intentando con HTML5 + AJAX + JQUERY + PHP

Entonces tengo el siguiente código le pertenece a un MODAL en donde voy a capturar los datos del formulario:

FORM

<form id="myForm" enctype="multipart/form-data" method="post">
    <!-- Modal body -->
    <br>
    <img src="../img/img-services/img-service-2.jpg" class="rounded mx-auto d-block" alt="Cinque Terre" width="100" height="100"> 
    <br>
    <div class="upload-btn-wrapper">
      <button class="upload-btn">Upload a file</button>
      <input type="file" name="img_url" id="img_url" />
    </div>
    <div class="modal-body">

      <input type="text" id="id" name="id" value="" hidden required="">
      <label>Service Name</label>
      <input type="text" id="name" name="name" value=""  onkeypress="return soloLetras(event)" onblur="limpia()" class="form-control validate" required="" placeholder="Enter Service Name">
      <p id="errorName" style="color:red; display: none;"></p>
      <label>Service Type</label>
      <select class="form-control" id="id_tipo_servicio" name="id_tipo_servicio">
        <option value="0">Select option...</option>
        <?php
          while ($valores = mysqli_fetch_array($result)) {
            echo '<option value="'.$valores[id_tipo_servicio].'">'.$valores[ts_nombre].'</option>';
          }
        ?>
      </select>
      <p id="errorSelect" style="color:red; display: none;"></p>
      <label>Description</label>
      <textarea id="desc" name="desc" class="form-control validate" required="" placeholder="Enter Service Description"></textarea>
      <p id="errorDesc" style="color:red; display: none;"></p>
      <label>Cost</label>
      <input type="number" id="cost" name="cost" value="" class="form-control validate" required="" placeholder="Enter Cost">
      <p id="errorCost" style="color:red; display: none;"></p>
      <div class="spinner-grow text-primary" style="display: none;" role="status" id="showLoad">
        <span class="sr-only">Loading...</span>
      </div>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-success" id="saveButton" onclick="doAction()" style="display: none"><span id="load" class="spinner-border spinner-border-sm" role="status" style="display: none" aria-hidden="true"></span> Save</button>

      <button type="button" class="btn btn-warning" id="edithButton" style="color:white;" onclick="doAction()" >Edith</button>

      <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
    </div>

Acá el archivo JS, en donde por JQUERY obtengo los datos que me deja el usuario, los asigno a sus variables, válido, hago un formData y lo mando en el AJAX:

function doAction(){

  var id_servicio = $('#id')[0].value;
  var id_tipo_servicio = $('#id_tipo_servicio')[0].value;
  var name = $('#name')[0].value;
  var desc = $('#desc')[0].value;
  var cost = $('#cost')[0].value;
  var img_url = $('#img_url').prop('files')[0];

    //insert
    console.log("INSERT - nombre: " + name + "desc: " + desc + "precio: " + cost + "id_tipo_servicio " + id_tipo_servicio);

    if(name === ""){ 
      $( "#name" ).focus();
      //document.getElementById("errorName").innerHTML = "Service Name is Required";
      $("#errorName").show();
      $("#errorName").html("Service Name is Required");
    }else if(id_tipo_servicio === "" || id_tipo_servicio === "0"){
      $( "#id_tipo_servicio" ).focus();
      //document.getElementById("errorName").innerHTML = "Service Name is Required";
      $("#errorName").hide();
      $("#errorSelect").show();
      $("#errorSelect").html("Service Type is Required");
    }else if(desc === "" || desc === "0"){
      $( "#desc" ).focus();
      $("#errorSelect").hide();
      $("#errorDesc").show();
      //document.getElementById("errorDesc").innerHTML = "Service Description is Required";
       $("#errorDesc").html("Service Name is Required");
    }else if(cost === "" || cost === "0"){
      $( "#cost" ).focus();
      $("#errorDesc").hide();
      $("#errorCost").show();
      //document.getElementById("errorCost").innerHTML = "Service Cost is Required";
      $("#errorCost").html("Service Cost is Required");

    }else{

      var formData = new FormData();

      formData.append('name',name);
      formData.append('id_tipo_servicio',id_tipo_servicio);
      formData.append('desc',desc);
      formData.append('cost',cost);
      formData.append('archivo',img_url);
      formData.append('function',"addService");

      $.ajax({
        data:  formData, //send data via AJAX
        url:   '../controller/serviceController.php', //url file controller PHP
        dataType: 'text', // what to expect back from the server
        cache: false,
        contentType: false,
        processData: false,
        type:  'post', //send POST data
        beforeSend: function () {
          document.getElementById("load").style.display = "block";
        },
        success:  function (response) { //get request

        if(response.success){ 
          $("#successModalTitle").html("<i class='fas fa-check-circle color-success'></i> ¡Success!");
        }else{
          $("#successModalTitle").html("<i class='fas fa-exclamation-circle color-error'></i> ¡Error!");
        }
          $("#successModalDescription").html(response.message);

          //alert(response.message);
          $('#actionModal').modal('toggle');
          $('#services').DataTable().ajax.reload();
          $('.close').click(); 

        }
      });


      } 
}

Y de este lado esta el PHP, en donde recibo el AJAX cargado con el DataForm, asigno valor a sus respectivas variables, me conecto a la base, armo el INSERT y lo ejecuto ../controller/serviceController.php:

if(isset($_POST['function']) && !empty($_POST['function'])) {

    $function = $_POST['function'];


    //En función del parámetro que nos llegue ejecutamos una función u otra
    switch($function) {

    case 'addService':
            # code...
            $name = $_POST['name'];
            $cost = $_POST['cost'];
            $desc = $_POST['desc'];
            $id_tipo_servicio = $_POST['id_tipo_servicio'];
            $date = date("Y-m-d");
            $iva = 0;
            $status = 1;

            $nombre = $_FILES['archivo']['name'];
            $ruta = $_FILES['archivo']['tmp_name'];
            $destino = ".../img/" . $nombre;

            require_once 'conn/connection.php';
            $connect = new connection();
            $connection=$connect->connections();


            $sql = "INSERT INTO servicios (id_tipo_servicio, ser_nombre, ser_descripcion, ser_img_url, ser_precio, ser_fecha_creacion, ser_fecha_actualizacion, ser_iva, ser_status) VALUES ('".$id_tipo_servicio ."','".$name."','".$desc."','".$destino."','".$cost."','".$date ."', '".$date."', '".$iva."', '".$status."');";


            $jsondata = array();

            if ($connection->query($sql)===true) {
                $jsondata['success'] = true;
                $jsondata['message'] = 'Felicidades! Has insertado el Servicio con Éxito.';

            } else {
                $jsondata['success'] = false;
                $jsondata['message'] = 'Error! Ha ocurrido un error, avisa a un administrador.';
            }
            //Aunque el content-type no sea un problema en la mayoría de casos, es recomendable especificarlo
            header('Content-type: application/json; charset=utf-8');

            echo json_encode($jsondata, JSON_FORCE_OBJECT);


            break;
}
}

¿Qué es lo que hace el código?

El código recoge los datos desde el HTML, va al JS cargado de datos, construyo un DataForm, lo lleno y esto se va en el AJAX, lo envía y ya en PHP es donde hay un error y esta raro porque, SI INSERTA, PERO NO ME DEVUELVE MENSAJE DE ÉXITO, el PHP regresa un false y me devuelve ERROR. Insisto, pero si INSERTA.

Realmente no se porque no devuelve TRUE si no tiene problemas al INSERTAR, ahora tampoco he logrado guardar el archivo en el servidor.

Asi inserta

introducir la descripción de la imagen aquí

Y este es el ERROR que muestra mi dashboard y esto es lo raro porque es COMO SINO ENTRARA AL IF

introducir la descripción de la imagen aquí

3
  • 1
    verifica si en tu metodo $connection->query($sql) realmente te regresa un valor true el 7 oct. 2019 a las 17:21
  • Es la función query: Retorna FALSE en caso de error. Si una consulta del tipo SELECT, SHOW, DESCRIBE o EXPLAIN es exitosa, mysqli_query() retornará un objeto mysqli_result. Para otras consultas exitosas de mysqli_query() retornará TRUE. el 7 oct. 2019 a las 17:30
  • consulta en que momento escribes la imagen en la ruta del disco, en php $destino solo es la ruta en texto???
    – user46896
    el 22 ago. 2020 a las 14:23

3 respuestas 3

1

Cuando mandas los datos no estas haciendo nada con el archivo lo tienes que mover a la carpeta que definas como uploads y claro con los permisos suficientes de escritura.

if (!file_exists($targetDir)) {
    @mkdir($targetDir,0755,true);
}

con este código verificas que exista la ruta y la crea su no existe

if (!move_uploaded_file($_FILES['archivo']['tmp_name'], $targetDir)) {
        echo sprintf('Error al mover el archivo %s para %s', $_FILES['archivo'['name'], $targetDir);
    }
0

Entonces segun tu comentario solo deberias invertir el if

ejemplo:

if (!$connection->query($sql)) {
     $jsondata['success'] = false;
     $jsondata['message'] = 'Error! Ha ocurrido un error, avisa a un administrador.';            
} else {
  $jsondata['success'] = true;
  $jsondata['message'] = 'Felicidades! Has insertado el Servicio con Éxito.';                   
}
1
  • Si invierto el if sale lo mismo, date cuenta que en el MODAL de ERROR, no me manda el MESSAGE, es como sino entrara a ninguna parte del IF el 7 oct. 2019 a las 17:37
0

Te falta el method:

'POST'

en las opciones del ajax.

2
  • no es este: type: 'post', //send POST data | si lo tengo en el AJAX el 7 oct. 2019 a las 17:40
  • Entiendo, con el archivo lo que pasa es que solo estas guardando la ruta, no estas moviendo el objeto de imagen que recuperas en el form. Y con lo del insert tendrias que hacer un var_dump para ver que es lo que pasa o revisar algun log para ver especificamente cual es el error, podes probar con try catch o algun error callback de tu conexion a la db. el 7 oct. 2019 a las 17:44

Tu Respuesta

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

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