0

estamos implementando un sistema de registro de mascotas, ahora tenemos un problema queremos subir imágenes al servidor, con jquery, php, hemos hecho el siguiente código que no logramos hacer funcionar, también juntos con la imagen se debe de registra en la base de datos junto con el nombre del propietario de la mascota, nombre de la mascota, fecha de nacimiento, edad, etc. , tambien hemos consultado a mucha información en el Internet y no logramos hacerlo funcionar, gracias

<form class="" id="registroMascotaMascotas" enctype="multipart/form-data" method="post">
            <div class="modal fade" id="modalMascota" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">                    
                <div class="modal-body">      
                    <div class="row">     
                    </div>
                    <div class="row">
                      <div class="col">
                          <label for="foto-can">Foto de la mascota</label>
                        <div class="custom-file">
                          <input
                            type="file"
                            class="custom-file-input"
                            id="fotoRegisMascota"
                            accept=".jpg, .png"
                            name="fotoRegisMascota"                                
                          />
                          <label
                            class="custom-file-label"
                            for="customFileLangHTML"
                            data-browse="Elegir una foto"
                            ></label>
                        </div>
                      </div>
                    </div>                       
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar <i class="fas fa-times"></i></button>
                  <button type="button" class="btn btn-primary" id="idGuardarMascota">Guardar <i class="fas fa-save"></i></button>
                </div>
              </div>
            </div>
          </div>

Función en JavaScript

function registroMascotas() {
const
    fotosMascota = document.getElementById("fotoRegisMascota"),
    archivoRuta = fotosMascota.value,
    exPermitidas = /(.jpg|.jpeg|.png)$/i,
    var formData = new FormData();
var files = $("#fotoRegisMascota")[0].files[0];
formData.append("file", files);

if (numeDocPropietario === "") {
    Swal.fire({
        type: "error",
        title: "Error",
        text: "Ingrese el documento de identidad del propietario!"
    });

} else {
    $("#modalMascota").modal("hide");
}
$.ajax({
    type: "POST",
    url: "../../pages/tables/mascotaregitramascota.php",
    data: Form,
    processData: false,
    contentType: false,
    success: function(r) {
        if (r == 1) {
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 3000
            });
            Toast.fire({
                type: "success",
                title: "Se guardo correctamente"
            });
        } else {
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: 3000
            });
            Toast.fire({
                type: "error",
                title: "Error con el servidor"
            });
        }
    }
});

}

Script que llama a la función

$(document).ready(function() {
   $("#idGuardarMascota").click(function() {
     registroMascotas();
  });
 });

Codigo php

<?php
  include_once '../../../includes/templates/conexion.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_FILES)) {
$check = @getimagesize($_FILES['fotoRegisMascota']['tmp_name']);
if ($check !== false) {
    $carpeta_destino = '../../fotosregistrados';
    $nombre_archivo =
        "imagen_" .
        date("dHis") .
        "." .
        pathinfo($_FILES['fotoRegisMascota']['name'], PATHINFO_EXTENSION);
    $archivo_subido = $carpeta_destino . $nombre_archivo;
    move_uploaded_file(
        $_FILES['fotoRegisMascota']['tmp_name'],
        $archivo_subido
    );
}
   }
   ?>

1 respuesta 1

0

Intenta solo crear tu FormData con tu formulario seleccionado sin usar el método appened, otro detalle es que en ajax no estas pasando tu FormData creado en tu data.

Ejemplo:

function registroMascotas() {
const
    fotosMascota = document.getElementById("fotoRegisMascota"),
    archivoRuta = fotosMascota.value,
    exPermitidas = /(.jpg|.jpeg|.png)$/i,
    var formData = new FormData(fotosMascota);

    if (numeDocPropietario === "") {
        Swal.fire({
            type: "error",
            title: "Error",
            text: "Ingrese el documento de identidad del propietario!"
        });

    } else {
        $("#modalMascota").modal("hide");
    }
    $.ajax({
        type: "POST",
        url: "../../pages/tables/mascotaregitramascota.php",
        data: formData,
        processData: false,
        contentType: false,
        success: function(r) {
            if (r == 1) {
                const Toast = Swal.mixin({
                    toast: true,
                    position: "top-end",
                    showConfirmButton: false,
                    timer: 3000
                });
                Toast.fire({
                    type: "success",
                    title: "Se guardo correctamente"
                });
            } else {
                const Toast = Swal.mixin({
                    toast: true,
                    position: "top-end",
                    showConfirmButton: false,
                    timer: 3000
                });
                Toast.fire({
                    type: "error",
                    title: "Error con el servidor"
                });
            }
        }
    });
}
1
  • Muchas, gracias me sirvió de mucho... el 15 oct. 2019 a las 21:22

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.