форма с вложением - jquery ajax php - PullRequest
0 голосов
/ 05 декабря 2018

Здравствуйте, я хотел бы прикрепить файл и отправить его с помощью jQuery AJAX и PHP, прямо сейчас он просто отправляет текст, может ли какая-то часть помочь мне с тем, как следует прикрепить файл и отправить электронное письмо с ним,

Затем я продолжу проверки,

Я покажу полное решение после его достижения

Это форма

           <form class="parte-form" enctype="multipart/form-data">  
                <input type="text" class="txt-field txt-full pName" name="pName" placeholder="* Nombre" required="required">
                <div class="half-input-cont">
                    <input type="text" class="txt-field txt-half" name="pPhone" placeholder="Telefono">
                    <input type="text" class="txt-field txt-half" name="pEmail" placeholder="* Correo" required="required">
                </div> 
                <textarea class="txt-field txt-full txt-area" placeholder="Mensaje" name="pMsg"></textarea>
                <div class="input-cont">
                    <label class="txt-file" for="cv">Adjuntar C.V.<p>Seleccionar archivo</p> <span>No se ha elegido archivo</span></label> 
                    <input type="file" class="txt-file-btn" id="cv" name="pFile">
                </div>
                <div class="more-btn-cont form-btn-cont">
                    <input type="hidden" name="frm-action" value="par-form">
                    <input type="submit" class="btn btn-blue-l btn-par" name="pPar" value="Enviar solicitud">
                </div> 
            </form>

Это подготовка данныхбыть отправленным - jQuery Ajax

$(data);
function data(){
    $('.btn-par').click(parte);
}

    function parte(e){ 
        e.preventDefault(); 
        var data = $('.parte-form').serializeArray();
        $.ajax({ 
            type: "POST",
            url: "data/comp-actions.php",
            data: data,
            beforeSend: function(){
            },
            success: function (response) {
                if (response == 1) {
                    var name = $('.pName').val();
                    $('.popup-name').html(name)
                    $('.popup-send').removeClass('hidden'); 
                    $('.popup-close').click(function(){
                        $('.popup-send').addClass('hidden');
                    });
                } else {
                    console.log('Error al enviar');
                }
            }
        });
    }

Это сбор данных и отправитель - PHP

    //Cotizar values
$pName = $_POST['pName'];
$pPhone = $_POST['pPhone'];
$pEmail = $_POST['pEmail'];
$pMsg = $_POST['pMsg']; 
$pPar = $_POST['pPar'];

 //File name 
$fileName = $_FILES['pFile']['name'];
$fileTmp = $_FILES['pFile']['tmp_name'];
$filePath = "files/".$fileName;

//File metadata
$fileType = $_FILES['pFile']['type'];
$fileSize = $_FILES['pFile']['size'];
// $fileError = $_FILES['pFile']['error'];


//Send mail
if($pName != "" && $pEmail != ""){
    $to = "my@email.com";
    $subject = "$pName Desea unirse al equipo";
    $headers = "From: $pEmail";
    $info = "$pName, se comunica con nosotros para unirse al equipo\n"
        . "\n"
        . "\n"
        . "Datos del solicitante\n"
        . "Nombre: $pName\n"
        . "Telefono: $pPhone\n"
        . "Email: $pEmail\n"
        . "mensaje: $pMsg\n"
        . "\n"
        . "\n"
        . "Datos del archivo\n"
        . "Archivo: $fileName\n"
        . "Tipo de archivo: $fileType\n"
        . "Tamaño del archivo: $fileSize\n"
        . "Ruta del archivo: $filePath\n"
        . "\n"   
        . "\n"
        . "\n";
    if (mail($to, $subject, $info, $headers)) {
        echo 1;
    }else{
        echo 0;
    }
}

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Вот мое решение для этой функции

Это решение может быть улучшено. Я работаю над ним, если у вас есть лучшее решение, пожалуйста, добавьте его или опубликуйте ссылку на решение

Файл с формой, вызовом ваших файлов css и js, в случае необходимости он может удалить файл recaptcha div

<form class="parte-form" id="contact_body" method="POST" action="send-unete.php" enctype="multipart/form-data">  
<input type="text" class="txt-field txt-full pName txt-text" name="pName" placeholder="* Nombre" required="required">
<div class="half-input-cont">  
    <input type="tel" class="txt-field txt-half txt-phone" name="pPhone" placeholder="Teléfono">
    <input type="email" class="txt-field txt-half" name="pEmail" placeholder="* Correo" required="required">
</div> 
<textarea class="txt-field txt-full txt-area" placeholder="Mensaje" name="pMsg"></textarea>
<div class="input-cont">
    <!-- it changes the style of the input type file -->
    <label class="txt-file" for="cv">Adjuntar C.V.<p>Seleccionar archivo</p> <span>No se ha elegido archivo</span></label> 
    <input type="file" class="txt-file-btn" id="cv" name="pFile[]">
</div>
<div class="g-recaptcha" data-sitekey="your key"></div>
<div class="more-btn-cont form-btn-cont">
    <!-- Set of email where the email will be send -->
    <input type="hidden" name="pEmailSet" value="<?php the_field( 'email_set_unete', 216) ?>">
    <!-- Identifies the form in case of have more forms or actions like save, delete, load etc -->
    <input type="hidden" name="frm-action" value="par-form">
    <input type="submit" class="btn btn-blue-l btn-par" name="pPar" value="Enviar solicitud">
</div> 
</form>
    <!-- Success popup -->
    <div class="popup-send layer hidden">
        <div class="wrapper">
            <div class="popup-info">
                <div class="popup-title">
                    <p>Mensaje enviado</p>
                    <button class="popup-close">X</button>  
                </div>
                <p class="popup-msg"><b class="popup-bold popup-name"></b>, Tus datos han sido enviados al área correspondiente en la brevedad nos comunicaremos contigo, para darle seguimiento a tu petición, <b class="popup-bold">Gracias</b></p>
            </div>
        </div>
    </div>
    <!-- Error popup -->
    <div class="popup-error layer hidden">
        <div class="wrapper">
            <div class="popup-info">
                <div class="popup-title">
                    <p>Mensaje no enviado</p>
                    <button class="popup-close">X</button>  
                </div>
                <p class="popup-msg"></p>
            </div>
        </div>
    </div>
<!-- it gets the mail path of the site used for references -->
<p class="dir hidden"><?php bloginfo('template_directory'); ?></p>

JS с вызовом ajax, который восстанавливает данныеи подготовить его для повторной загрузки с помощью php-файла

function data(){
    // Action function
    // $('.btn-cot').click(cotizar);
    $('.btn-par').click(parte);
}

    function parte(e){ 
        $("#contact_body").submit(function(e){
            e.preventDefault(); //prevent default action 
            proceed = true;

            //if everything's ok, continue with Ajax form submit
            if(proceed){ 
                var post_url = $(this).attr("action"); //get form action url
                var request_method = $(this).attr("method"); //get form GET/POST method
                var form_data = new FormData(this); //Creates new FormData object
                $.ajax({ //ajax form submit
                    url : "data/comp-actions.php",
                    type: request_method,
                    data : form_data,
                    dataType : "json",
                    contentType: false,
                    cache: false,
                    processData:false
                }).done(function(res){ //fetch server "json" messages when done
                    if(res == 1){
                        var name = $('.pName').val();
                        $('.popup-name').html(name)
                        $('.popup-send').removeClass('hidden'); 
                        $('.popup-close').click(function(){
                            $('.popup-send').addClass('hidden');
                        });
                    }else{
                        $(".popup-error").removeClass("hidden"), 
                        $(".popup-error .popup-msg").html('Tu mensaje no pudo ser enviado, te pedimos revises que hayas completado los <b class="popup-bold">campos requeridos (*)</b>, revisado que el archivo adjunto sea en <b class="popup-bold">formato pdf</b>, asi como marcado la <b class="popup-bold">casilla de verificación</b> y vuelvas a intentarlo, <b class="popup-bold">Gracias</b>'),
                        $(".popup-close").click(function() {
                            $(".popup-error").addClass("hidden");
                        })
                    }
                });
            }
        });
    }

Это файл comp-actions.php, он проверяет отправленное действие и загружает нужный файл, необходимо добавить recaptchalib.php, чтобыполучить ответ recaptcha

include('recaptchalib.php');
//Action selector
$action = $_POST['frm-action']; 
$captchaResponse = $_POST['g-recaptcha-response'];
if ($captchaResponse != "") {
    $captcha = 1;
    if($action == "cot-form" && $captcha == 1){
        include('send-cotizar.php');    
    } elseif($action == "par-form" && $captcha == 1){
        include('send-unete.php'); //**
    }elseif($captcha != 1){
        echo 0;
    }
} else {
    echo 0;
}

Это файл send-unete.php, который загружается после проверки действия и подготавливает данные и вложение для отправки

$pEmailSet = $_POST['pEmailSet'];
$recipient_email    = $pEmailSet; //recepient
$fromUser = $_POST['pEmail'];
$from_email         = $fromUser; //from email using site domain.


if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
die('Sorry Request must be Ajax POST'); //exit script
}

if($_POST){
$sender_name    = filter_var($_POST["pName"], FILTER_SANITIZE_STRING); //capture sender name
$sender_email   = filter_var($_POST["pEmail"], FILTER_SANITIZE_STRING); //capture sender email
$phone_number   = filter_var($_POST["pPhone"], FILTER_SANITIZE_NUMBER_INT);
$subject        = "$sender_name desea unirse a nuestro equipo";
$message        = filter_var($_POST["pMsg"], FILTER_SANITIZE_STRING); //capture message

$attachments = $_FILES['pFile'];

$file_count = count($attachments['name']); //count total files attached
$boundary = md5("sanwebe.com"); 

//construct a message body to be sent to recipient
$message_body =  "$sender_name, se comunica con nosotros para unirse a nuestro equipo\n";
$message_body .= "\n";
$message_body .= "Datos del solicitante\n";
$message_body .=  "Nombre: $sender_name\n";
$message_body .=  "Email: $sender_email\n"; 
$message_body .=  "Tel: $phone_number\n";
$message_body .=  "Mensaje: $message\n";

if($file_count > 0){ //if attachment exists
    //header
    $headers = "MIME-Version: 1.0\r\n"; 
    $headers .= "From:".$from_email."\r\n"; 
    $headers .= "Reply-To: ".$sender_email."" . "\r\n";
    $headers .= "Content-Type: multipart/mixed; boundary = $boundary\r\n\r\n"; 

    //message text
    $body = "--$boundary\r\n";
    $body .= "Content-Type: text/plain; charset=ISO-8859-1\r\n";
    $body .= "Content-Transfer-Encoding: base64\r\n\r\n"; 
    $body .= chunk_split(base64_encode($message_body)); 

    //attachments
    for ($x = 0; $x < $file_count; $x++){       
        if(!empty($attachments['name'][$x])){

            if($attachments['error'][$x]>0) //exit script and output error if we encounter any
            {
                $mymsg = array( 
                1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini", 
                2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form", 
                3=>"The uploaded file was only partially uploaded", 
                4=>"No file was uploaded", 
                6=>"Missing a temporary folder" ); 
                print  json_encode( array('type'=>'error',$mymsg[$attachments['error'][$x]]) ); 
                exit;
            }

            //get file info
            $file_name = $attachments['name'][$x];
            $file_size = $attachments['size'][$x];
            $file_type = $attachments['type'][$x];

            //read file 
            $handle = fopen($attachments['tmp_name'][$x], "r");
            $content = fread($handle, $file_size);
            fclose($handle);
            $encoded_content = chunk_split(base64_encode($content)); //split into smaller chunks (RFC 2045)

            $body .= "--$boundary\r\n";
            $body .="Content-Type: $file_type; name=".$file_name."\r\n";
            $body .="Content-Disposition: attachment; filename=".$file_name."\r\n";
            $body .="Content-Transfer-Encoding: base64\r\n";
            $body .="X-Attachment-Id: ".rand(1000,99999)."\r\n\r\n"; 
            $body .= $encoded_content; 
        }
    }

}else{ //send plain email otherwise
   $headers = "From:".$from_email."\r\n".
    "Reply-To: ".$sender_email. "\n" .
    "X-Mailer: PHP/" . phpversion();
    $body = $message_body;
}

$sentMail = mail($recipient_email, $subject, $body, $headers);
if($sentMail) //output success or failure messages
{  
    echo 1;     
    // print json_encode(array('type'=>'done', 'text' => 'Thank you for your email'));
    // exit;
}else{
    echo 0;
    // print json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));  
    // exit;
}
}
0 голосов
/ 05 декабря 2018

Используйте FormData, чтобы также получить содержимое файла

var form = $(".parte-form")[0];
var data = new FormData(form);

В вашем вызове ajax установите

processData: false
...