1

Estoy intentando hacer una petición POST pero todos los datos se envían excepto la imagen.

¿Cómo puedo solucionarlo?

JavaScript

$(function () {
$("#botonEnviar").click(function () {
    var nombre = document.getElementById("nombre").value;
    var correo = document.getElementById("correo").value;
    var mensaje = document.getElementById("mensaje").value;
    var telefono = document.getElementById("telefono").value;
    var foto = document.getElementById("foto");
    if (nombre == "") {
        $('#nombre').focus();
        $('#nombre').css('border-color', 'red');
        return false;
    } else if (correo == "") {
        $('#correo').focus();
        $('#correo').css('border-color', 'red');
        return false;
    } else if (mensaje == "") {
        $('#mensaje').focus();
        $('#mensaje').css('border-color', 'red');
        return false;
    } else if (telefono == "") {
        $('#telefono').focus();
        $('#telefono').css('border-color', 'red');
    } else {
        var formData = new FormData();
        formData.append('nombre', nombre);
        formData.append('correo', correo);
        formData.append('mensaje', mensaje);
        formData.append('telefono', telefono);
        formData.append('foto', foto);
        $('input').val('');
        $('textarea').val('');
        $.ajax({
            url: 'php/procesar.php',
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            dataType: 'JSON',
            success: function () {
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $('.msg').text(thrownError);
            }
        });
        return false;
    }
});
});

procesar.php

<?php
require 'PHPMailerAutoload.php';

$phpMailer = new PHPMailer;
$phpMailer->isSMTP();
$phpMailer->SMTPDebug = 2;
$phpMailer->Debugoutput = 'html';
$phpMailer->Host = 'smtp.gmail.com';
$phpMailer->Port = 587;
$phpMailer->SMTPSecure = 'tls';
$phpMailer->SMTPAuth = true;

/*Datos Formulario*/
$nombre = $_POST['nombre'];
$correo = $_POST['correo'];
$mensaje = $_POST['mensaje'];
$telefono = $_POST['telefono'];
$fotoTmp = $_FILES['foto']['tmp_name'];
$fotoName = $_FILES['foto']['name'];

/*Cuenta Info*/
$phpMailer->Username = $info;
$phpMailer->Password =  $pswp;
$phpMailer->setFrom($info, $asunto);
$phpMailer->addAddress($correo, $nombre);
$phpMailer->addAddress($info, $nmb);

if(isset($_FILES['foto']) && $_FILES['foto']['error'] == UPLOAD_ERR_OK){
    $phpMailer->addAttachment($fotoTmp, $fotoName);
}

/*Mensaje para contacto*/
$phpMailer->isHTML(true);
$phpMailer->Subject = 'Asunto Mensaje';
$phpMailer->IsHTML(true);
$phpMailer->msgHTML(file_get_contents('mensaje.html'),dirname(__FILE__));

$phpMailer->AltBody = 'Cuerpo del Mensaje';

if (!$phpMailer->Send()) {
    echo "Error: ".$phpMailer->ErrorInfo;
}else{
    echo "Mensaje Enviado";
}    
?>
5
  • Lo pude solucionar quitando el dataType: 'JSON'. El problema ahora es que el correo me llega sin la imágen.
    – Johan M
    Commented el 17 sept. 2017 a las 16:50
  • Te he puesto una solución adosando un controlador del evento submit del formulario. Si quieres hacerlo con el evento click del botón deberás facilitarme el código HTML del formulario, su name, su id o algo por el que acceder a él. No me gusta hacer búsquedas de la etiqueta <form> más cercana. Commented el 17 sept. 2017 a las 18:08
  • Por cierto @Johan, cambia el asunto de tu pregunta (dale a EDITAR) si lo que preguntas es otra cosa diferente a lo que pone el título o bien abre una pregunta nueva y cierra ésta. Gracias. Commented el 17 sept. 2017 a las 18:11
  • Muchas gracias, lo solucione con tus indicaciones.
    – Johan M
    Commented el 17 sept. 2017 a las 18:26
  • De nada, un placer :) Commented el 17 sept. 2017 a las 18:57

1 respuesta 1

0

Debes usar new FormData(this); para facilitar la tarea de crear los datos del formulario que serán enviados a través de XHR, acceder campo a campo funciona con los de valores de texto, pero no con las imágenes:

$(function () {
$("body").on("submit", "form", function () {
    var nombre = document.getElementById("nombre").value;
    var correo = document.getElementById("correo").value;
    var mensaje = document.getElementById("mensaje").value;
    var telefono = document.getElementById("telefono").value;
    var foto = document.getElementById("foto");
    if (nombre == "") {
        $('#nombre').focus();
        $('#nombre').css('border-color', 'red');
        return false;
    } else if (correo == "") {
        $('#correo').focus();
        $('#correo').css('border-color', 'red');
        return false;
    } else if (mensaje == "") {
        $('#mensaje').focus();
        $('#mensaje').css('border-color', 'red');
        return false;
    } else if (telefono == "") {
        $('#telefono').focus();
        $('#telefono').css('border-color', 'red');
    } else {
        var formData = new FormData(this);
        $('input').val('');
        $('textarea').val('');
        $.ajax({
            url: 'php/procesar.php',
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function () {
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $('.msg').text(thrownError);
            }
        });
        return false;
    }
});
});

Deberás cambiar el <button> por un <input type="submit"> para que te funcione el evento submit. En caso contrario dime cómo acceder a tu formulario o pon su HTML para que te diga cómo acceder a sus datos.

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.