Send attached files by email form

Question

I have a contact form template that I use on my websites. It uses JS to validate the content of the fields and PHP to send the data pro email. I wonder if it is possible to send files (images) attached using this template. I thank you already. I leave here the codes:

HTML FORM:

<form name="sentMessage" id="contactForm" novalidate>
                <div class="control-group form-group">
                    <div class="controls col-lg-4">
                        <label>Nome Completo*</label>
                        <input type="text" class="form-control" id="name" required data-validation-required-message="Por favor, insira seu nome.">
                        <p class="help-block"></p>
                    </div>
                </div>
                <div class="control-group form-group">
                    <div class="controls col-lg-3">
                        <label>Telefone*</label>
                        <input type="tel" class="form-control" id="phone" required data-validation-required-message="Por favor, insira seu número de telefone." placeholder="[phone]">
                    </div>
                </div>
                <div class="control-group form-group">
                    <div class="controls col-lg-5">
                        <label>Email*</label>
                        <input type="email" class="form-control" id="email" required data-validation-required-message="Por favor, insira seu email.">
                    </div>
                </div>


               </div><!-- row -->

                <hr>

                <div class="row">
                <div class="control-group form-group">
                    <div class="controls col-lg-3">



                        <div class="form-group">
                 <label style="padding-top:15px" for="sel1">Assunto:</label>
                   <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                   </select>
           </div>



                    </div>
                </div>

                </div><!-- row -->
                <br>
                <hr>
                <div class="row">
                <div class="control-group form-group">
                    <div class="controls col-lg-12">

                        <label>Mensagem</label>
                        <textarea rows="10" cols="100" class="form-control" id="message" maxlength="999" style="resize:none"></textarea>
                    </div>
                </div>

                </div><!--row-->


                <div class="row">
                 <div class="col-lg-5">
                <div id="success"></div>
                <!-- For success/fail messages -->
                <br>
                <button type="submit" class="btn btn-success btn-lg">Enviar</button>
                </div>
            </form>

        </div>

JAVASCRIPT TO VALIDATE:

$(function() {

$("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {

    },
    submitSuccess: function($form, event) {
        event.preventDefault(); 
        var name = $("input#name").val();
        var phone = $("input#phone").val();
        var email = $("input#email").val();
    var sel1 = $("input#sel1").val();
        var message = $("textarea#message").val();
        var firstName = name; 
        if (firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
        }
        $.ajax({
            url: "bin/contact_me.php",
            type: "POST",
            data: {
                name: name,
                phone: phone,
                email: email,
        sel1: sel1,
        message: message
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Sua mensagem foi enviada. </strong>");
                $('#success > .alert-success')
                    .append('</div>');


                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>" + firstName + " Parece que não está funcionando...</strong> Você poderia enviar um email direto? Desculpe pela inconveniência.");
                $('#success > .alert-danger').append('</div>');

                $('#contactForm').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});});

$('#name').focus(function() {
    $('#success').html('');
});

PHP TO SEND:

<?php

if(empty($_POST['name'])        ||
   empty($_POST['phone'])       ||
   empty($_POST['email'])       ||
  !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
 {
   echo "No arguments Provided!";
   return false;
 }
 $name = $_POST['name'];
 $phone = $_POST['phone'];
 $email_address = $_POST['email'];
 $sel1 = $_POST['sel1'];
 $message = $_POST['message'];


 $to = '[email protected]'; 
 $email_subject = "Formulário de contato, $name te enviou uma mensagem."; 
 $email_body = "Você recebeu uma nova mensagem do site.\n\n"."Aqui estão     os detalhes:\n\nNome: $name\n\nTelefone: $phone\n\nAssunto: $sel1\n\nEmail: $email_address\n\nMensagem:\n$message";
 $headers = "From: $email_address\n";
 $headers .= "Reply-To: $email_address";    
 mail($to,$email_subject,$email_body,$headers);
 return true;           
 ?>

Answer 1

To send files by form you must use the super global variable $_FILES[]

In your form add the field:

<input type="file" name="imagem" />
// Não esqueça de adicionar o parametro de midia em seu formulario
// Adicione enctype="multipart/form-data" logo após o method="post"(get)

If you want to send more than one file change the code above where type="file" will become type="file[]" and also add the parameter to the multiple staying that way;

<input type="file[]" name="imagem" multiple />

for field validation use HTML5’s own method; required (put the required right after the multiple)

On your PHP send page pick up the file using the super global variable mentioned at the beginning.

$nomeArquivo = $_FILES["imagem"]["name"]; // Pega o nome do arquivo
$nomeTemporario = $_FILES["imagem"]["tmp_name"]; // Pega o nome temporario do arquivo
$tamanhoArquivo = $_FILES["imagem"]["size"]; // Pega o tamanho
$caminho = 'uploads/'; // define a pasta onde sera salvo o arquivo

$arquivoArray = explode(".", $nomeArquivo); // Separa o nome do arquivo da extensão, por exemplo: imagem1.jpg -> ficara imagem1
    $extensao = end($arquivoArray); // Pega a extensao do arquivo (final da variavel $arquivoArray), por exemplo: imagem1.jpg -> ficara .jpg
    $arquivo = $caminho.md5(time().rand(3212, 15452)).'.'.$extensao; // Junta o caminho e cria um nome complexo para o arquivo para evitar duplicidade, a variável conterá por exemplo -> uploads/987asd3a218w6qw21qeq651.jpg

    if (!is_dir($caminho)) { // Verifica se a pasta para salvar o arquivo existe (uploads)
        mkdir($caminho); // Caso não exista cria a pasta
        chmod($caminho, 777); // Caso não exista adiciona permissões de leitura e escrita na pasta
    }

    if (move_uploaded_file($nomeTemporario, $arquivo)) { // Move o arquivo com o nome tempoparario para a pasta
    foreach($_POST as $key => $val){
//Percorre os indices passados por POST armazanando em $key e os valores em $val
    $campo[] = $key; // Cria um array $campo com os indices
    $valor[] = "'$val'"; // Cria um array $valor com os valores


    $campos = implode(",", $campo); // Junta os indices de $campo com virgula
    $valores = implode(',', $valor); // Junta os valores de $valor com virgula

// Faz a inserção no banco de dados usando PDO
$inserir = $con->prepare("INSERT INTO $tabela($campos, imagem) VALUES($valores,'$arquivo')");
$inseri = $inserir->execute();