-1

Preciso pegar um arquivo enviado de um form com o jquery, os inputs type="text" eu consigo pegar, mais os type="file" não está pegando, estou fazendo assim:

Como posso fazer pra pegar o arquivo enviado pelo 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); 

    });

    });
10
  • Vc quer fazer upload do arquivo?
    – Meu ovo
    3/10/2017 às 17:27
  • sim e enviar por emai pelo phpmiler 3/10/2017 às 17:35
  • Ok, mas já consegue fazer o upload?
    – Meu ovo
    3/10/2017 às 17:37
  • o upload, não pois vem todas as Ids nome' : nome, 'email' : email, 'telefone' : telefone, 'setor' : setor menos a id do #arquivo 3/10/2017 às 17:38
  • Então, vc envia as variáveis pro arquivo PHP, e lá vc deve ter um código para salvar o arquivo no servidor. Fiz um teste aqui e todas as variáveis estão sendo enviadas.
    – Meu ovo
    3/10/2017 às 17:43

1 Resposta 1

-1

Você poderia utilizar ajax.

Seria algo como:

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

Função ajax

$(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);
        },
   });
}
6
  • com o jquery, partindo do meu exemplo, não daria? 3/10/2017 às 17:36
  • @WagnerMartinsBodyboard , utilizando o ajax vive reduz linhas desnecessárias de código. Porque teria q ser desta forma? 3/10/2017 às 17:41
  • hmm entendi, como eu faria no ajax para mostrar o resultado em uma div e adicionar o loading, como faz no meu código em jquery? Utilizando seu código 3/10/2017 às 17:42
  • Simplesmente informaria o que fazer, substituindo o console.log(data) pelo código. 3/10/2017 às 17:45
  • Para adicionar o loading, você teria q utilizar o beforesend, stackoverflow.com/questions/28398711/…. 3/10/2017 às 17:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .