4

Estou tentando adaptar um upload que tenho usando Ajax, mas não estou conseguindo, pelo que li preciso usar o formData, tentei algumas alternativas, mas todas não resolveram, o meu form tem vários campos e o que estou com problema é justamente o upload.

O que tenho no momento é isso:

O formulário

<form enctype="multipart/form-data" class="form-horizontal" id="frmDoc" method="POST">
<div class="form-group">
  <label class="col-md-2 control-label">Arquivo</label>
  <div class="col-md-10">
    <input type="file" class="btn btn-default" id="Arquivo"  name="Arquivo">
    <p class="help-block"> Extensão permitida <strong>PDF</strong>. </p>
  </div>
</div>

O envio Ajax:

$(document).ready(function(){
    $(function () {
        // Validation
        $("#frmDoc").validate({
            // Do not change code below
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            },
            submitHandler: function (form) {

                var data = $(form).serialize();

                // console.log(data);

                $.ajax({
                    type: 'POST',
                    url: 'pDocsNormativos.php',
                    data: data,
                    dataType: 'json',
                    beforeSend: function () {
                        $("#msgInsert").html('×AVISO! Enviando...');
                    },
                    success: function (response) {
                        if (response.codigo == "1") {
                            $("#msgInsert").html('×AVISO!' + response.mensagem  + '');
                        } else {
                            $("#msgInsert").html('×ATENÇÃO! ' + response.mensagem + '');
                        }
                    //  $('#frmDoc').each (function(){
                    //      this.reset();
                    //  });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        console.log(xhr, ajaxOptions, thrownError);
                        $("#msgInsert").html('×ATENÇÃO! Ocorreu um erro ao tentar enviar o Documento. Contate o suporte técnico.');
                    }
                });
                return false;
            }
        });
    });
});

Vi alguns exemplos mas não consegui adaptar, exemplo como desse link: Fazer upload de arquivo com AJAX

O campo file não está sendo enviado, vejam o console.log(): inserir a descrição da imagem aqui

5
  • 1
    Vê se isto ajuda: pt.stackoverflow.com/questions/142834/…
    – Miguel
    Commented 19/12/2016 às 15:18
  • Que erro que esta dando?
    – LocalHost
    Commented 19/12/2016 às 15:44
  • Olá @LocalHost, não consigo enviar o arquivo para realizar o upload, quando recebo para fazer o upload ela está 'NULL' Commented 19/12/2016 às 15:52
  • Os dados antes de enviar estão indo corretamente? Como esta seu arquivo que recebe os dados para upload?
    – LocalHost
    Commented 19/12/2016 às 15:55
  • A maioria dos campos do form estão indo corretamente para a página .php que fará o processo de upload, mas o arquivo file não. Commented 19/12/2016 às 15:56

1 Resposta 1

1

Olá @adventistapr

Você precisará definir o cache:false, contentType: false, processData: false na configuração do $.ajax() e utilizar o FormData.

Dessa forma você conseguirá enviar os arquivos e os demais campos do formulário.

$(document).ready(function(){
    $(function () {
        // Validation
        $("#frmDoc").validate({
            // Do not change code below
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            },
            submitHandler: function (form) {
                /*
                  Você pode usar também o 
                  var myForm = document.getElementById('frmDoc');
                  var data = new FormData(myForm);
                */
                var data = new FormData(form[0]);

                // console.log(data);

                $.ajax({
                    type: 'POST',
                    url: 'pDocsNormativos.php',
                    data: data,
                    dataType: 'json',
                    cache: false,//<--- Define como falso
                    contentType: false,//<--- Define como falso
                    processData: false,//<--- Define como falso
                    beforeSend: function () {
                        $("#msgInsert").html('×AVISO! Enviando...');
                    },
                    success: function (response) {
                        if (response.codigo == "1") {
                            $("#msgInsert").html('×AVISO!' + response.mensagem  + '');
                        } else {
                            $("#msgInsert").html('×ATENÇÃO! ' + response.mensagem + '');
                        }
                    //  $('#frmDoc').each (function(){
                    //      this.reset();
                    //  });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        console.log(xhr, ajaxOptions, thrownError);
                        $("#msgInsert").html('×ATENÇÃO! Ocorreu um erro ao tentar enviar o Documento. Contate o suporte técnico.');
                    }
                });
                return false;
            }
        });
    });
});

Veja algumas referencias:

https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php

https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

1
  • Obrigado pela dica @Carlos Fernandes, vou testar imediatamento. Commented 17/01/2017 às 18:47

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