Event.preventDefault() for attachment with php and js

Question

I have the following script below that does a validation in the contact form and shows the message in div how the message was sent or not, as this below is sent the normal message in my email, but in that same form I have an attachment field and when I try to send an attachment I get nothing in my email.

// Contact form 
var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: $("#main-contact-form").serialize(),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Enviando Mensagem...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Mensagem enviada. O mais breve possível retornaremos o contato.</p>').delay(9000).fadeOut();
    });
});

Form

<form  enctype="multipart/form-data"  name="contact-form" action="envia.php" method="post" id="main-contact-form"> <!--  chama o envia.php --> 
                                <!--<form id="main-contact-form" name="contact-form" method="post" form action="envia.php"> -->   

                             <div class="form-group">
                                <input type="text"  input name="nomeremetente" id="nomeremetente" class="form-control" placeholder="Nome" required>
                            </div>
                             <div class="form-group">
                                <input type="telefone" input name="telefone" class="form-control" placeholder="DDD + Telefone" required>
                            </div>
                            <div class="form-group">
                                <input type="empresa" input name="empresa" class="form-control" placeholder="Empresa" required>
                            </div>
                             <div class="form-group">
                                <input type="cidade" input name="cidade" class="form-control" placeholder="Cidade" required>
                            </div>
                            <div class="form-group">
                                <input type="email" input name="emailremetente" class="form-control" placeholder="E-mail" required>
                            </div>
                            <div class="form-group">
                               <!--<input type="text" input name="assunto" class="form-control" placeholder="Assunto" required>-->
                               <select id="mySelect" input name="assunto" size="1" class="form-control"  required>
                               <option value="Sem Assunto">Selecione o Assunto</option>
                               <option value="Comercial">Comercial</option>
                               <option value="Cotação">Cotação</option>
                               <option value="Informação">Informação</option>
                               <option value="Reclamação">Reclamação</option>
                               <option value="Sugestão">Sugestão</option>
                               <option value="Trabalhe Conosco">Trabalhe Conosco</option>
                               <option value="Outros">Outros</option>
                               </select>
                            </div>
                            <div class="form-group" id="inputOculto">
                                  <input id="anexo" name="arquivo" type="file"  class="form-control-anexo"  input/> 
                            </div>            

                            <div class="form-group">
                              <textarea input name="mensagem" class="form-control" rows="3" placeholder="Mensagem" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Enviar Mensagem</button>
                            </form> 

Answer 1

First check in the form statement if you have the tag enctype="multipart/form-data" then try Using the class Formdata

Ex

 $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: new FormData(this),
        processData: false,
        contentType: false,
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Enviando Mensagem...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Mensagem enviada. O mais breve possível retornaremos o contato.</p>').delay(9000).fadeOut();
    });