take jquery file from a form

Question

I need to get a file sent from a form with jquery, the inputs type="text" I can get, plus the type="file" is not catching, I’m doing like this:

How can I get the file sent by form?

<form role="form" name="form1" id="login_trabalhe" method="post" action="javascript:void(0)" enctype="multipart/form-data">

    <div class="col-md-6">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
            <input id="nome" type="text" name="nome" class="form-control" placeholder="Nome">
        </div>

        <div class="form_mobile"></div>

    </div>
    <div class="col-md-6">

        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="text" id="email" name="email" class="form-control" placeholder="Email">
        </div>

    </div>
    <div class="clearfix"></div>
    <br>

    <div class="col-md-6">

        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
            <input style="height: 60px;" id="telefone" type="text" name="telefone" class="form-control" placeholder="Telefone">
        </div>

    </div>
    <div class="form_mobile"></div>

    <div class="col-md-6">

        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-level-up" aria-hidden="true"></i></span>
            <select id="setor" name="setor" class="form-control" style="height: 60px;">
                <option value="setor" selected>Selecione um setor</option>
                <option value="Atendimento">Atendimento</option>
                <option value="Fiscal">Fiscal</option>
                <option value="Contabilidade">Contabilidade</option>
                <option value="Setor Pessoal">Setor Pessoal</option>
                <option value="Financeiro">Financeiro</option>
            </select>

        </div>

    </div>

    <div class="clearfix"></div>
    <br>

    <div class="col-md-6">

    </div>

    <div class="clearfix"></div>

    <div class="col-md-12">
        <label>Arquivo (.doc ou .pdf)</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-pencil-square" aria-hidden="true"></i></span>
            <input style="height: 60px;" type="file" name="arquivo" id="arquivo" class="form-control" placeholder="Arquivo">
        </div>
    </div>

    <div class="col-md-6">

        <div class="input-group">

        </div>

    </div>
    <div class="clearfix"></div>
    <br>
    <div class="col-md-12">

    </div>
    <div class="clearfix"></div>
    <br>
    <div class="col-md-12">

        <div id="result_trabalhe">
            <button type="submit" class="btn btn-default">Enviar

            </button>
        </div>
    </div>
</form>

Jquery

   $("#login_trabalhe").submit(function(event){    

$("#result_trabalhe").html('<button type="submit" class="btn btn-default" style="background-color: #eb8030;color: #fff;border: 0;">Enviar <img style="float:right; margin-left:5px;" src="imagens/45.gif"  /></button>');


        event.preventDefault();

        var nome = $("#nome").val();
        var email = $("#email").val();
        var telefone = $("#telefone").val();
        var setor = $("#setor").val();
        var arquivo = $("#arquivo").val();


        $.post("ajax_trabalhe.php", {
        'nome' : nome, 
        'email' : email, 
        'telefone' : telefone, 
        'setor' : setor, 
        'arquivo' : arquivo

        }, function(data){
            $("#result_trabalhe").html(data); 

    });

    });

Answer 1

You could use ajax.

It would be something like:

<form id="frm" enctype="multipart/form-data">
    <input id="file"/>
    <button type="button" id="btn_enviar">Salvar</button>
</form>

Ajax function

$(document).ready(function() {
   $('#btn_enviar').click(function () {
      enviar();
   });
});
function enviar() {
   var formData = new FormData($('#frm')[0]);
   $.ajax({
        url : 'url_servidor';
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        dataType: "JSON",
        success: function(data){
            console.log(data);
        },
   });
}