Form with image, ajax and phpmailer

Question

Form with image, ajax and phpmailer

Navigation

#1 by (0 votes)

1

I am trying to make a request POST but all the data is sent except the image.

How can I solve it?

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;
    }
});
});

proces.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";
}    
?>

javascript jquery json ajax phpmailer

asked by Johan M 17.09.2017 в 18:37

source

1 answer

Problem with root redirects Initialize fixes of objects in C ++

score 0 · Accepted Answer

You must use new FormData(this); to facilitate the task of creating the form data that will be sent through XHR, access field to field works with the values of text, but not with the images:

$(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;
    }
});
});

You should change the <button> for a <input type="submit"> so that the submit event works for you. Otherwise tell me how to access your form or put your HTML to tell you how to access your data.