1

Tengo un formulario por donde envían información y documentos en HTML y todas las variables las paso a JavaScript para mostrar un mensaje con Ajax cuando todo sale bien en el mismo formulario y limpiarlo. En la página web he realizado dos más que me funcionan bien pero ahora tengo el lió que necesito adjuntar dos archivos y no se como pasarlos:

Código Html, lo hice usando bootstrap:

            <form class="px-5 col-12 my-3" id="env_documentos" role="form" enctype="multipart/form-data">
                <div class="form-group mb-1 row">

                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="NombreDoc" placeholder="Su nombre completo" data-toggle="tooltip" data-animation="false" data-placement="top" title="Ingresa tu nombre completo" autocomplete="off" required>
                </div>
                <div class="form-group mb-1 row">

                    <input type="tel" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TelefonoDoc" placeholder="Su número celular" data-toggle="tooltip" data-animation="false" data-placement="left" pattern="[0-9]{10}" title="Número celular (10 digitos) sin espacios" autocomplete="off" required>
                </div>
                <div class="form-group mb-1 row">

                    <input type="email" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="CorreoDoc" placeholder="[email protected]" data-toggle="tooltip" data-animation="false" data-placement="right" title="Ingresa tu nombre completo" autocomplete="off" required>
                </div>
                <div class="form-group mb-1 row">
                    <label for="TipoCredito" class="mb-0 mt-2 col-12"><b>Destinación del crédito</b></label>
                    <select class="custom-select col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TipoCredito" required>
                        <option selected>Seleccione uno...</option>
                        <option value="Vehículo">Vehículo</option>
                        <option value="Inmueble">Inmueble</option>
                    </select>
                </div>
                <div class="form-group mb-1 row">
                    <label for="TipoEmpleo" class="mb-0 mt-2 col-12"><b>¿Usted es empleado o independiente?</b></label>
                    <select class="custom-select col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TipoEmpleo" required>
                        <option selected>Seleccione uno...</option>
                        <option value="Empleado">Empleado</option>
                        <option value="Independiente">Independiente</option>
                    </select>
                </div>
                <div class="form-group mb-1 row mt-3">
                    <p class="col-12 m-0 p-0">Adjunte carta laboral, si es empleado o extracto bancario si es independiente</p>
                    <label class="custom-file col-md-4 offset-md-4 col-lg- offset-lg-5">
                      <input type="file" name="Cerficado" id="documento1">
                    </label>
                </div>
                <div class="form-group mb-1 row mt-3">
                    <p class="col-12 m-0 p-0">Cédula de ciudadanía</p>
                    <label class="custom-file col-md-4 offset-md-4 col-lg- offset-lg-5">
                      <input type="file" name="Cerficado" id="documento2">
                    </label>
                </div>
                <div class="form-group mb-1 row">
                    <label for="Referencia1" class="mb-0 mt-2 col-12"><b>1ra Referencia personal:</b></label>
                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="NombreRef1" placeholder="Nombre completo" data-toggle="tooltip" data-animation="false" data-placement="top" title="Nombre completo" autocomplete="off" required>
                    <input type="tel" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TelefonoRef1" placeholder="Número de teléfono" data-toggle="tooltip" data-animation="false" data-placement="left" title="Número celular ó fijo con indicativo sin espacios" autocomplete="off" required>
                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="DireccionRef1" placeholder="Dirección" data-toggle="tooltip" data-animation="false" data-placement="right" title="Dirección de residencia" autocomplete="off" required>
                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="CargoRef1" placeholder="Cargo / labor" data-toggle="tooltip" data-animation="false" data-placement="left" title="Cargo o labor que desempeña" autocomplete="off" required>
                </div>

                <div class="form-group mb-1 row">
                    <label for="Referencia2" class="mb-0 mt-2 col-12"><b>2da Referencia personal:</b></label>
                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="NombreRef2" placeholder="Nombre completo" data-toggle="tooltip" data-animation="false" data-placement="top" title="Nombre completo" autocomplete="off" required>
                    <input type="tel" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="TelefonoRef2" placeholder="Número de teléfono" data-toggle="tooltip" data-animation="false" data-placement="left" title="Número celular ó fijo con indicativo sin espacios" autocomplete="off" required>
                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="DireccionRef2" placeholder="Dirección" data-toggle="tooltip" data-animation="false" data-placement="right" title="Dirección de residencia" autocomplete="off" required>
                    <input type="text" class="form-control col-md-8 offset-md-2 col-lg-4 offset-lg-4" id="CargoRef2" placeholder="Cargo / labor" data-toggle="tooltip" data-animation="false" data-placement="left" title="Cargo o labor que desempeña" autocomplete="off" required>
                </div>



                <label class="form-check-label letramini gris text-white fondoblanco">
                    <input class="form-check-input" type="checkbox" value="" required>He leído y acepto la <a class="" href="" data-toggle="modal" data-target="#Aprovacion">política de tratamiento de datos personales</a>
                </label>

                <!-- Menú presentado en una ventana Modal -->
                <div class="modal" id="Aprovacion" tabindex="-1" role="dialog" aria-labelledby="ModalAprovacion" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">

                            <!-- INICIO CABECERA DE LA VENTANA MODAL (MENU) -->
                            <div class="modal-header">
                                <img src="img/SVG/logo.svg" alt="Logotipo Tu Crédito Fácil" class="logo">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                            </button>
                            </div>
                            <!-- FIN CABECERA DE LA VENTANA MODAL (MENU) -->

                            <!-- INICIO CUERPO DE LA VENTANA MODAL (MENU) -->
                            <div class="modal-body m-0 p-0">
                                <div class="text-center banda-azul p-2">
                                    <p class="text-white p-0 m-0"><i class="fa fa-info-circle mr-1 ml-0 text-white" aria-hidden="true"></i>INFORMACIÓN IMPORTANTE<br>Autorización <span class="text-info">Manejo de la información</span></p>
                                </div>

                            </div>
                            <!-- FIN CUERPO DE LA VENTANA MODAL (MENU) -->
                            <p class="px-5 py-3">
                                Autorizo de manera voluntaria, previa, expresa e informada a Empresa para la recolección y posterior análisis de los datos aquí suministrados, con la finalidad de ser contactado y a través de ellos poder tramitar un crédito en diferentes entidades financieras o mediar en la compra de un inmueble o vehículo, según sea el servicio que solicite. Así mismo, declaro que he sido informado sobre el derecho que tengo a conocer, actualizar y rectificar mis datos personales, solicitar prueba de la autorización, ser informado sobre el tratamiento que se ha dado a mis datos personales, presentar quejas ante la Superintendencia de Industria y Comercio (SIC), revocar la autorización otorgada y/o solicitar la supresión de mis datos en los casos en que sea procedente, conoce más sobre esta política dando <a href="legal/politica_datos_personales.html" target="_blank">click</a>
                            </p>

                            <!-- INICIO PÍE DE PÁGINA DE LA VENTANA MODAL (MENU) -->
                            <div class="modal-footer m-0 p-4 text-center">

                                <p class="m-0 p-0">Pará más información contactenos a las líneas telefonicas<br>311 111 1111 - 311 111 1111</p>
                            </div>
                            <!-- INICIO PÍE DE PÁGINA DE LA VENTANA MODAL (MENU) -->

                        </div>
                    </div>
                </div>
                <!-- fin de Modal -->

                <div class="text-center mt-3">
                    <button type="button" class="btn btn-danger">Enviar</button>
                </div>
                <div class="alert alert-success hidden-xl-down mt-2" role="alert" id="msgDocu">
                    <strong>¡Bien hecho!</strong> La información ha sido enviada exitosamente. <strong> &nbsp;Pronto te contactaremos e informaremos el resultado de tu solicitud.</strong>
                </div>
            </form>

este es el código normal conque capturo los valores y después envío a php:

$("#form-consulta").submit(function(event){
// cancela el envío del formulario
event.preventDefault();
submitForm();
});

function submitForm(){
// Initiate Variables With Form Content
var nombre = $("#NombreContacto").val();
var tel = $("#NumeroContacto").val();
var email = $("#CorreoContacto").val();
var mensaje =$("#Consulta").val();

$.ajax({
    type: "POST",
    url: "php/contacto.php",
    data: "name=" + nombre + "&email=" + email + "&tel=" + tel + "&mensaje=" + mensaje,
    success : function(text){
        if (text == "success"){
            formSuccess();
        }

        else {
        console.log("Error de PHP. No retorna Success",text);
        }
    }
});
}
function formSuccess(){
$( "#msgContacto" ).removeClass( "hidden-xl-down" );
$('input[type=text],input[type=email],input[type=tel],textarea').val('');
}

en PHP los capturo y envío así:

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$tel = $_POST["tel"];
$mensaje = $_POST["mensaje"];
// A quien se va a enviar el correo y el asunto que va a llevar
$EmailTo = "[email protected]";
$Subject = "Información solicitada a través del Sitio WEB";
// preparando el contenido del correo
$Body = '<html>'.
'<head><title>Contacto WEB</title></head>'.
'<body><h3>La siguiente persona nos ha contactado por medio del formulario WEB:</h3>'.
'<strong>'.
'Nombre: '.
'</strong>';
$Body .= $name;
$Body .= '<br>'.
'<strong>'.
'E-mail: '.
'</strong>';
$Body .= $email;
$Body .= '<br>'.
'<strong>'.
'Teléfono: '.
'</strong>';
$Body .= $tel;
$Body .= '<br>'.
'<br>'.
'<strong>'.
'Dejando el siguiente mensaje: '.
'</strong>';
$Body .= $mensaje;
$Body .= '</body>'.
'</html>';
// para el envío en formato HTML 
$headers = "MIME-Version: 1.0\r\n"; 
$headers .= "Content-type: text/html; charset=utf-8"."\r\n"; 
//dirección del remitente 
$headers .= "From: Contacto WEB <[email protected]>\r\n"; 
// dirección de respuesta, en este caso sera la que se ingresa en el formulario
$headers .= "Reply-To:" . $email . "\r\n"; 
// ruta del mensaje desde origen a destino
$headers .= "Return-path:";
$headers .= $mail;
$headers .= "\r\n"; 
// direcciones que recibián copia 
$headers .= "Cc: [email protected]\r\n"; 
// direcciones que recibirán copia oculta 
$headers .= "Bcc: [email protected]\r\n"; 
// envio del correo electrónico
$success = mail($EmailTo, $Subject, $Body, $headers);
// enviando el mensaje de que fue correcto el envío para que aparezca en el formulario el mensaje
if ($success){
echo "success";
}else{
echo "invalid";
}
?>

por ejemplo. Ahora mi consulta es: ¿Cómo hago para capturar los dos?:

<input type="file" name="Cerficado" id="documento1">
<input type="file" name="Cerficado" id="documento2">

y pasarlos por JavaScript para pasarlo a PHP y enviarlos como adjunto?

Bueno no se si sera sencillo o difícil pero para el que anda aprendiendo como yo y no encuentra casi documentación es difícil. De antemano muchas gracias

4

1 respuesta 1

0

Para obtener los ficheros contenidos en un formulario deberías utilizar la variable superglobal $_FILES en vez de $_POST. Mediante esta variable superglobal podrás acceder a parámetros como el nombre del fichero, el nombre temporal, el tamaño o su tipo, por ejemplo. Puedes encontrar todos los parámetros a los que puedes acceder aquí.

Para capturar los ficheros desde JQuery, podrías hacerlo de la siguiente manera:

var fichero = $("#documento1");
var file = fichero.files[0];

La información la tendrás que pasar creando un objeto FormData:

var ficheroData = new FormData();
ficheroData.append("fichero", file);
ficheroData.append("name", nombre);
ficheroData.append("email", email);
...

Por lo que tu llamada AJAX quedaría así:

$.ajax({
    type: "POST",
    url: "php/contacto.php",
    data: ficheroData,
    success : function(text){
        if (text == "success"){
            formSuccess();
        }

        else {
        console.log("Error de PHP. No retorna Success",text);
        }
    }
});

Por otro lado, para poder recuperar los ficheros desde PHP lo tendrás que hacer de la siguiente manera:

$_FILES["fichero"]
5
  • OK. Frascisco, gracias. Pero ¿cómo puedo hacer para capturarlos en JavaScript y pasarlos al php? el 20 nov. 2017 a las 8:25
  • @LeonardoTinocoAcero He editado mi respuesta para añadir esa parte. el 20 nov. 2017 a las 8:52
  • Francisco, ¿debo crear todas las variables antes de ponerlas en el FormData? ¿Debo crear dos variables "fichero", una para cada documento? el 21 nov. 2017 a las 23:13
  • @LeonardoTinocoAcero Si, todas las variables deberían estar creadas para añadirlas al FormData. Y en realidad cuando utilizas la función append lo que estás creando es una estructura clave-valor, no una variable, ya que las variables ya las tendrás creadas de antes. Si quisieras añadir ambos ficheros al append deberían ir cada uno con una clave diferente para poder recuperar ambos. Ej: fichero1, fichero2 el 21 nov. 2017 a las 23:36
  • Necesite agregarle processData: false, contentType: false, al llamado $.ajax pero funciono bien, muchas gracias. el 23 nov. 2017 a las 18:10

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.