form with attachment - jquery ajax php

Hello I would like to attach a file and send it using jQuery AJAX and PHP, right now it just send the text, can some body help me about what it follows to attach the file and send the email with it,

Then i will proceed with validations,

I will show the complete solution after achieve it

This is the form

           <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>

this is the data preparation to be send - 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');
                }
            }
        });
    }

This is the data recollection and sender - 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 = "[email protected]";
    $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;
    }
}

Solution

Use FormData to grab file contents as well

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

In your ajax call, set

processData: false