Validating input file with ajax request

Question

Whenever I give a Submit in the form appears an error in the line in which this variable $file, I disabled the ajax and did not appear the error, so I guess it is not php problem

$(document).ready(function() {
  $('.formulario').submit(function() {
    $.ajax({
      url: 'enviar.php',
      type: 'POST',
      data: $('.formulario').serialize(),
      success: function(valor) {
        $('.resp').html(valor);
      },
      beforeSend: function() {
        $('.resp').html('<div class="resposta email-aguarde email-nao-validado"><span>Aguarde enquanto enviamos seus dados</span><span><img src="ajax-loader.gif" alt=""/></span></div>');
      }
    });
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="resp"></div>
  <form class="formulario" method="post">
    <input class="nome" type="text" name="nome" placeholder="Nome" />
    <input class="email" type="text" name="email" placeholder="E-Mail" />
    <input class="telefone" type="text" name="telefone" placeholder="Telefone" />
    <select class="assunto" name="assunto">
      <option>Assunto</option>
      <option value="Dúvidas">Dúvidas</option>
      <option value="Críticas">Críticas</option>
      <option value="Elogios">Elogios</option>
      <option value="Outros">Outros</option>
    </select>
    <textarea class="mensagem" name="mensagem" placeholder="Digite sua mensagem"></textarea>
    <input class="arquivo" type="file" name="arquivo" />
    <input class="enviar" type="submit" value="Enviar Dados" />
  </form>
  <div class="clear"></div>
</div>

send php.

$nome = strip_tags(trim($_POST['nome']));
$email = strip_tags(trim($_POST['email']));
$telefone = strip_tags(trim($_POST['telefone']));
$assunto = strip_tags(trim($_POST['assunto']));
$mensagem = strip_tags(trim($_POST['mensagem']));
$arquivo = $_POST['arquivo'];

$tamanho = 5242880; //5 megabytes
$tipos = array(
'image/jpeg',
'image/pjpeg'
); //tipos de arquivos


$erro = array();
if (empty($nome)) {
$erro[] = "Digite seu nome";
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$erro[] = "Digite um e-mail válido";
}
if (empty($telefone)) {
$erro[] = "Digite seu telefone";
}
if (empty($assunto) || $assunto == 'Assunto') {
$erro[] = "Selecione um assunto";
}
if (empty($mensagem)) {
$erro[] = "Digite uma mensagem";
}

if (!is_uploaded_file($arquivo['tmp_name'])) {
$erro[] = 'O arquivo é obrigátorio';
} if ($arquivo['size'] > $tamanho) {
$erro[] = 'O limite do arquivo é de 5 megabytes';
} if (!in_array($arquivo['type'], $tipos)) {
$erro[] = 'O tipo do arquivo permitido é apenas JPEG';
} else if (count($erro) < 1) :

require_once 'phpmailer/PHPMailerAutoload.php';

$Email = new PHPMailer();
$Email->setLanguage('br');

//Define dados do servidor e tipo de conexão
$host = 'smtp.gmail.com';
$username = '';
$senha = '';
$porta = 587;
$secure = 'tsl';

//Email e nome de quem vai receber o email
$receber_email = '[email protected]';
$receber_nome = 'Sérgio Machado';

$from = $username;
$fromName = 'Sérgio Machado';

$Email->isSMTP();
$Email->Host = $host;
$Email->SMTPAuth = true;
$Email->Username = $username;
$Email->Password = $senha;
$Email->Port = $porta;
$Email->SMTPSecure = $secure;

$Email->From = $from;
$Email->FromName = $fromName;
$Email->addReplyTo($email, $nome);
$Email->addAddress($receber_email, $receber_nome);

$Email->isHTML(true);
$Email->CharSet = 'utf-8';
$Email->WordWrap = 70;

$Email->Subject = $assunto;

$body = "<strong>Nome: </strong>{$nome} <br />
    <strong>E-Mail: </strong>{$email} <br />
    <strong>Telefone: </strong>{$telefone} <br />
    <strong>Assunto: </strong>{$assunto} <br />
    <strong>Mensagem: </strong>{$mensagem} <br />
    <strong>Arquivo em anexo: </strong>{$arquivo['name']} <br />";

$Email->msgHTML($body);
$Email->AddAttachment($arquivo['tmp_name'], $arquivo['name']);

//Verifica se a mensagem foi enviada ou não.
if ($Email->Send()) {
    echo '<p class="resposta email-enviado">E-mail enviado com sucesso</p>';
} else {
    echo '<p class="resposta email-nao-enviado">Error: e-mail não enviado,      por favor tente outra vez!</p>';
}
endif;

if (count($erro) >= 1) {
echo '<ul class="resposta email-nao-validado">';
foreach ($erro as $err) {
    echo '<li>' . $err . '</li>';
}
echo '</ul>';
}

Answer 1

@If Sergio has not changed anything in the code however, do this, step by step, should not fail anything:

When files are mixed we should use Formdata() to send data + files to server when we upload with ajax

HTML changes:

<form class="formulario" enctype="multipart/form-data" method="post">

JS changes (can copy directly):

$(document).ready(function() {
  $('.formulario').submit(function() {
    var form_data = new FormData();
    form_data.append('arquivo', $('input.arquivo').prop('files')[0]);
    form_data.append('nome', $('input.nome').val());
    form_data.append('email', $('input.email').val());
    form_data.append('telefone', $('input.telefone').val());
    form_data.append('assunto', $('select.assunto').val());
    form_data.append('mensagem', $('textarea.mensagem').val());
    console.log(form_data);
    $.ajax({
      url: 'enviar.php',
      type: 'POST',
      data: form_data,
      cache: false,
      contentType: false,
      processData: false,
      success: function(valor) {
        $('.resp').html(valor);
      },
      beforeSend: function() {
        $('.resp').html('<div class="resposta email-aguarde email-nao-validado"><span>Aguarde enquanto enviamos seus dados</span><span><img src="ajax-loader.gif" alt=""/></span></div>');
      }
    });
    return false;
  });
});

PHP changes (send.php) (can copy directly):

$nome = strip_tags(trim($_POST['nome']));
$email = strip_tags(trim($_POST['email']));
$telefone = strip_tags(trim($_POST['telefone']));
$assunto = strip_tags(trim($_POST['assunto']));
$mensagem = strip_tags(trim($_POST['mensagem']));

$tamanho = 5242880; //5 megabytes
$tipos = array(
    'image/jpeg',
    'image/pjpeg'
);


$erro = array();
if (empty($nome)) {
    $erro[] = "Digite seu nome";
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $erro[] = "Digite um e-mail válido";
}
if (empty($telefone)) {
    $erro[] = "Digite seu telefone";
}
if (empty($assunto) || $assunto == 'Assunto') {
    $erro[] = "Selecione um assunto";
}
if (empty($mensagem)) {
    $erro[] = "Digite uma mensagem";
}

if(!isset($_FILES['arquivo'])) {
    $erro[] = 'O arquivo é obrigátorio';
}
else {
    $arquivo = $_FILES['arquivo'];
    if ($arquivo['size'] > $tamanho) {
        $erro[] = 'O limite do arquivo é de 5 megabytes';
    }
    if (!in_array($arquivo['type'], $tipos)) {
        $erro[] = 'O tipo do arquivo permitido é apenas JPEG';
    }
}

if (count($erro) < 1) {
    // enviar email aqui
}
else {
    echo '<ul class="resposta email-nao-validado">';
    foreach ($erro as $err) {
        echo '<li>' . $err . '</li>';
    }
    echo '</ul>';
}

I didn’t copy the sending of the email so it wouldn’t be too long here. I hope it works

Answer 2

The problem is that AJAX does not support sending files with serialize, and it is necessary to specify content type and process data for false.

try the following:

$('.formulario').submit(function() {
  var formData = new FormData($(this));
  $.ajax({
     url: 'enviar.php',
     type: 'POST',
     cache: false,
     contentType: false,
     processData: false,
    data: formData,
    success: function(valor) {
      $('.resp').html(valor);
    },
    beforeSend: function() {
      $('.resp').html('<div class="resposta email-aguarde email-nao-validado"><span>Aguarde enquanto enviamos seus dados</span><span><img src="ajax-loader.gif" alt=""/></span></div>');
    }
  });
return false;
});