Upload PDF by ajax

Question

I have a form with several inputs text and 1 input file (where I send a PDF file). If I send by ajax it does not send the "FILE", I tested send without ajax, only by Ubmit, and it worked. The question is even in sending by ajax. I did some research on the subject, but I could not solve it. Could you point me a solution to this case please.

This is the js script:

$("#cadastrarJob").click(function (){
var trabalho  = $("#jobTrabalho").val();
var cliente   = $("#jobCliente").val();
var valor     = $("#jobValorContrato").val();
var gastos    = $("#jobGastos").val();
var descricao = $("#jobDescricao").val();
var file      = $("#jobFile").val();

if(trabalho == '' || cliente == '' || valor == '' || gastos == '' || descricao == '' || file == ''){
    $.notify({
        message: 'Preencha todos os campos!',
        },{
        // settings
        element: 'body',
        position: null,
        type: "danger",
        placement: {
            from: "top",
            align: "center"
        }
    });
}else{
    var data = $("#formAddJob").serialize();

    $.ajax({
        type : 'POST',
        url  : '../conexao/addJob.php',
        data : data,
        dataType: 'json',
        success :  function(retorno){
            if(retorno.erro == 0){
                alert(retorno.mensagem);
            }
        }
    });    
}
});

This is the PHP:

<?php
if(isset($_POST['trabalho']) && $_POST['trabalho'] != ''):

$trabalho   = (isset($_POST['trabalho'])) ? $_POST['trabalho'] : '' ;
$cliente    = (isset($_POST['cliente'])) ? $_POST['cliente'] : '' ;
$vContrato  = (isset($_POST['valor'])) ? $_POST['valor'] : '' ;
$gEstimados = (isset($_POST['gastos'])) ? $_POST['gastos'] : '' ;
$descricao  = (isset($_POST['descricao'])) ? $_POST['descricao'] : '' ;

// Pasta onde o arquivo vai ser salvo
$_UP['pasta'] = '../img/logoClientes/';
// Tamanho máximo do arquivo (em Bytes)
$_UP['tamanho'] = 1024 * 1024 * 10; // 10Mb
// Array com as extensões permitidas
$_UP['extensoes'] = array('pdf', 'doc', 'docx', 'jpg');
// Renomeia o arquivo? (Se true, o arquivo será salvo como .jpg e um nome único)
$_UP['renomeia'] = false;
// Array com os tipos de erros de upload do PHP
$_UP['erros'][0] = 'Não houve erro';
$_UP['erros'][1] = 'O arquivo no upload é maior do que o limite do PHP';
$_UP['erros'][2] = 'O arquivo ultrapassa o limite de tamanho especifiado no HTML';
$_UP['erros'][3] = 'O upload do arquivo foi feito parcialmente';
$_UP['erros'][4] = 'Não foi feito o upload do arquivo';
// Verifica se houve algum erro com o upload. Se sim, exibe a mensagem do erro
if ($_FILES['file']['error'] != 0) {

  die("Não foi possível fazer o upload, erro:" . $_UP['erros'][$_FILES['file']['error']]);
  exit; // Para a execução do script
}
// Caso script chegue a esse ponto, não houve erro com o upload e o PHP pode continuar
// Faz a verificação da extensão do arquivo
$arquivo = $_FILES['file']['name'];
$arr = explode('.', $arquivo);
$extensao = strtolower(end($arr));
if (array_search($extensao, $_UP['extensoes']) === false) {
  echo "Por favor, envie arquivos com as seguintes extensões: jpg, doc ou pdf";
  exit;
}
// Faz a verificação do tamanho do arquivo
if ($_UP['tamanho'] < $_FILES['file']['size']) {
  echo "O arquivo enviado é muito grande, envie arquivos de até 10Mb.";
  exit;
}
// O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta
// Primeiro verifica se deve trocar o nome do arquivo
if ($_UP['renomeia'] == true) {
  // Cria um nome baseado no UNIX TIMESTAMP atual e com extensão .jpg
  $nome_final = md5(time()).'.jpg';
} else {
  // Mantém o nome original do arquivo
  $nome_final = $_FILES['file']['name'];
}

// Depois verifica se é possível mover o arquivo para a pasta escolhida
if (move_uploaded_file($_FILES['file']['tmp_name'], $_UP['pasta'] . $nome_final)) {
  // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo
  echo "Upload efetuado com sucesso!";
  echo '<a href="' . $_UP['pasta'] . $nome_final . '">Clique aqui para acessar o arquivo</a>';
} else {
  // Não foi possível fazer o upload, provavelmente a pasta está incorreta
  echo "Não foi possível enviar o arquivo, tente novamente";
}


    $retorno['erro']     = '0';
    $retorno['mensagem'] = 'Tem post';
    echo json_encode($retorno);
else:    
    $retorno['erro']     = '0';
    $retorno['mensagem'] = 'Não tem post';
    echo json_encode($retorno);
endif;
?>

Remembering that the PHP code is working perfectly, because I tested it without ajax, only by Ubmit and worked right.

Answer 1

The problem is that Jquery does not find the path to the file you want to upload, that is, if you make an Alert to the input file you will see that will give for example C:/fakepath/(filename.pdf)

I think it is not possible to upload via Jquery

Answer 2

Then to perform the upload you need to perform the ajax call as follows

Get the form file

 var file_data = $('#take-picture').prop('files')[0];
 var form_data = new FormData();



jqxhr = $.ajax( {
    type: 'POST',
    url  : '../conexao/addJob.php',
    data:form_data,
    processData:false, 
    contentType:false,
})
insira o código aqui

processData:false // prevents automatic processing which by default is key value

contenttype:false // says the request that does not generate a standard header for sending, by default this setting comes true in jquery, this adds a uft-8 header that can prevent sending of files

Formdata //Allows attaching file objects to XHR requests (Ajax requests)