9

Estou com um problema e não consigo resolver, estou tentando fazer um upload via ajax e php, já consegui algumas dicas aqui pelo SO, mas continuo com problemas e sei que a grande chance de estar cometendo alguma besteira é grande. Vou tentar mostrar.

Tenho um form que está assim configurado:

<form enctype="multipart/form-data" class="form-horizontal" id="frmDoc" method="POST">
<!-- CONTEÚDO --> 

O código que dever enviar as informações está assim:

$(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 = new FormData(form[0]);

                // console.log(data);

                $.ajax({

                    type: 'POST',
                    url: 'ajax/pDocsNormativos.php',
                    data: data,
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,

                    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;
            }
        });
    });
});


E no PHP tenho isso:

// VARIÁVEL DE CONTROLE
$retorno = array();

// FUNÇÃO PARA CONVERTER DATAS
function parseDate($date, $outputFormat = 'd/m/Y'){
    $formats = array(
        'd/m/Y',
        'd/m/Y H',
        'd/m/Y H:i',
        'd/m/Y H:i:s',
        'Y-m-d',
        'Y-m-d H',
        'Y-m-d H:i',
        'Y-m-d H:i:s',
    );

    foreach($formats as $format){
        $dateObj = DateTime::createFromFormat($format, $date);
        if($dateObj !== false){
            break;
        }
    }

    if($dateObj === false){
        throw new Exception('Data invalida:' . $date);
    }

    return $dateObj->format($outputFormat);
}

// DIRETÓRIO
$diretorio = 'upload/'; 

if ($_SERVER['REQUEST_METHOD'] == 'POST') { 

    // DADOS DO FORMULÁRIO
    $TipoDoc = $_POST['TipoDoc'];
    $Divisao = $_POST['Divisao'];
    $Area = $_POST['AreaBusca'];
    $Pasta = $_POST['Pasta'];
    $Data = $_POST['Data'];
    $Numero = $_POST['Numero'];
    $Revisao = $_POST['Revisao'];
    $Titulo = $_POST['Titulo'];

    $Link = $Pasta;

    $NomePasta = $Pasta;    
    $NomePasta = substr($NomePasta, 13);    
    $NomePasta = rtrim($NomePasta,'/');

    // VALIDAÇÕES DE PREENCHIMENTO
    if ($TipoDoc == 0):
        $retorno = array('codigo' => 0, 'mensagem' => ' Selecione um Tipo de Documento');
        echo json_encode($retorno);
        exit();
    endif;

    if ($Divisao == 0):
        $retorno = array('codigo' => 0, 'mensagem' => ' Selecione uma Divisão');
        echo json_encode($retorno);
        exit();
    endif;

    if ($Area == 0):
        $retorno = array('codigo' => 0, 'mensagem' => ' Selecione uma Área');
        echo json_encode($retorno);
        exit();
    endif;

    if (empty($Data)):
        $retorno = array('codigo' => 0, 'mensagem' => ' Preencha a Data do cadastro');
        echo json_encode($retorno);
        exit();
    endif;

    if (empty($Numero)):
        $retorno = array('codigo' => 0, 'mensagem' => ' Preencha o campo Número');
        echo json_encode($retorno);
        exit();
    endif;

    if (empty($Titulo)):
        $retorno = array('codigo' => 0, 'mensagem' => ' Preencha o campo Título');
        echo json_encode($retorno);
        exit();
    endif;

    if(!isset($_FILES['Arquivo'])):
        $retorno = array('codigo' => 0, 'mensagem' => ' Informe o arquivo para Upload');
        echo json_encode($retorno);
        exit();
    endif;  

    // CONVERTENDO DATAS PARA BD
    $Data = parseDate($Data, "Y-m-d");

    $name     = $_FILES['fileUpload']['name'];
    $tmpName  = $_FILES['fileUpload']['tmp_name'];
    $error    = $_FILES['fileUpload']['error'];
    $size     = $_FILES['fileUpload']['size'];
    $ext      = strtolower(pathinfo($name, PATHINFO_EXTENSION));

    switch ($error) {
        case UPLOAD_ERR_OK:            
            $valid = true;          

            //validate file extensions
            if ( !in_array($ext, array('pdf')) ) {
                $valid = false;
                $retorno = array('codigo' => 1, 'mensagem' => 'Extensao de arquivo invalida ');
                echo json_encode($retorno);
                exit();             
            }
            //validate file size
            if ( $size/1024/1024 > 2 ) {
                $valid = false;
               $retorno = array('codigo' => 1, 'mensagem' => 'Tamanho do arquivo e superior a tamanho maximo permitido');
               echo json_encode($retorno);
               exit();
            }
            //upload file
            if ($valid) {
                $targetPath =  dirname( __FILE__ ) .'/'. $diretorio . '/'. $name;
                move_uploaded_file($tmpName,$targetPath); 

                // INSERE DADOS
                $arrayDados = array('DataEmissao' => $Data,
                                    'IdDivisao' => $Divisao, 
                                    'IdArea' => $Area, 
                                    'Numero' => $Numero,                     
                                    'Titulo' => $Titulo, 
                                    'Link' => $Link, 
                                    'Tipo' => $TipoDoc, 
                                    'Status' => 1, 
                                    'Revisao' => $Revisao, 
                                    'Pasta' => $NomePasta);
                $retorno = $crud->insert($arrayDados);              

                // Se inserido com sucesso código 1, senão retorna mensagem de erro
                if ($retorno):
                    $retorno = array('codigo' => 1, 'mensagem' => ' Documento Normativo inserido com sucesso');
                    echo json_encode($retorno);
                    exit();
                else:
                    $retorno = array('codigo' => '0', 'mensagem' => $TipoDoc);
                    echo json_encode($retorno);
                    exit();
                endif;              
            }
            break;
        case UPLOAD_ERR_INI_SIZE:
            $retorno = array('codigo' => 1, 'mensagem' => 'O arquivo enviado excede a directiva upload_max_filesize em php.ini.');
            echo json_encode($retorno);
            break;
        case UPLOAD_ERR_PARTIAL:
            $retorno = array('codigo' => 1, 'mensagem' => 'O arquivo foi enviado parcialmente.');
            echo json_encode($retorno);
            break;
        case UPLOAD_ERR_NO_FILE:
            $retorno = array('codigo' => 1, 'mensagem' => 'Nenhum arquivo foi tranferido.');
            echo json_encode($retorno);
            break;
        case UPLOAD_ERR_NO_TMP_DIR:
            $retorno = array('codigo' => 1, 'mensagem' => 'Faltando uma pasta temporaria. Introduzida no PHP 4.3.10 e PHP 5.0.3.');
            echo json_encode($retorno);
            break;
        case UPLOAD_ERR_CANT_WRITE:
            $retorno = array('codigo' => 1, 'mensagem' => 'Falha ao gravar arquivo em disco. Introduzido no PHP 5.1.0.');
            echo json_encode($retorno);
            break;
        default:
            $retorno = array('codigo' => 1, 'mensagem' => 'Erro desconhecido');
            echo json_encode($retorno);
            break;
    }
} else {
    //Envia um erro acaso o usuário tente acessar o script por outros métodos
   $retorno = array('codigo' => 1, 'mensagem' => 'Método HTTP não suportado para esta ação');
   echo json_encode($retorno);
   exit();   
}

header('Content-Type: application/json');
echo json_encode($retorno);

Não estou conseguindo enviar os campos do form, pois o meu console me dá a seguinte mensagem, vou postar uma imagem para não complicar muito, vejam:

inserir a descrição da imagem aqui

Imagem do console.log inserir a descrição da imagem aqui

Seguindo sugestão, estou compartilhando o html do form:

          <div class="widget-body">
        <form enctype="multipart/form-data" class="form-horizontal" id="frmDoc" method="POST">
          <fieldset>
            <legend>Adicionar Instrução Normativa</legend>
            <div class="form-group">
              <label class="col-md-2 control-label" for="select-2">Tipo Doc</label>
              <div class="col-md-10">
                <select class="form-control" id="TipoDoc" name="TipoDoc">
                  <option value="0">Tipo Documento</option>
                  <option value="1">Instru&ccedil;&atilde;o Normativa</option>
                  <option value="2">Circular Transit&oacute;ria</option>
                  <option value="3">Manual Operacional</option>
                  <option value="4">Miss&atilde;o</option>
                  <option value="5">Vis&atilde;o</option>
                  <option value="6">Princ&iacute;pios e Valores</option>
                  <option value="7">C&oacute;digo de &Eacute;tica</option>
                  <option value="8">Regulamento Interno</option>
                  <option value="9">Organograma</option>
                  <option value="10">Estatuto Social</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-2 control-label" for="select-1">Divisão</label>
              <div class="col-md-10">
                <select class="form-control" name="Divisao" id="Divisao" onchange="buscaDadosArea()">
                  <option value="0">Divisão</option>
                  <?php foreach ($ResDivisao as $Divisao) { ?>
                  <option value="<?php echo $Divisao->IdDivisao ?>"><?php echo $Divisao->Nome ?></option>
                  <?php } ?>
                </select>
              </div>
            </div>
            <!-- RESULTADO DA BUSCA PELA DIVISÃO -->
            <div class="form-group" id="Area"> </div>

            <!-- RESULTADO DA BUSCA PELA ÁREA -->
            <div class="form-group" id="Pasta"> </div>
            <div class="form-group">
              <label class="col-md-2 control-label">Data</label>
              <div class="col-md-10">
                <input type="text" class="form-control datepicker"  data-lang="pt-BR" data-RTL="false" value="" name="Data" id="Data"  data-dateformat="dd/mm/yy">
              </div>
            </div>                
            <div class="form-group">
              <label class="col-md-2 control-label">Numero</label>
              <div class="col-md-10">
                <input name="Numero" type="text" class="form-control" id="Numero" placeholder="Número" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-2 control-label">Revisão</label>
              <div class="col-md-10">
                <input name="Revisao" type="text" class="form-control" id="Revisao" placeholder="Revisão" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-2 control-label">Título</label>
              <div class="col-md-10">
                <input name="Titulo" type="text" class="form-control" id="Titulo" placeholder="Título" />
              </div>
            </div>
            <legend>Selecione o PDF</legend>
            <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="fileUpload"  name="fileUpload">
                <p class="help-block"> Extensão permitida <strong>PDF</strong>. </p>
              </div>
            </div>
          </fieldset>
          <div class="form-actions">
            <div class="row">
              <div class="col-md-12">
                <button class="btn btn-primary" type="submit"> <i class="fa fa-save"></i> Gravar </button>
              </div>
            </div>
          </div>
        </form>
        <div id="msgInsert" style="padding: 10px;"> 
          <!-- Mensagens --> 
        </div>
      </div>
2
  • 2
    Compartilha o html do <form/>. Pois o php não está encontrando os indices no post TipoDoc, Divisao, ... Commented 6/02/2017 às 12:30
  • Qual é essa biblioteca que você está usando para fazer a validação do formulário? Commented 7/02/2017 às 10:46

4 Respostas 4

6
+25

A linha

$TipoDoc = $_POST['TipoDoc'];

Está printando o notice que esta no seu print, e com isso está sando problema no seu retorno já que ele ferra o tipo de dado do 'Json'. Ele vai jogar a mensagem de erro + Json ai o interpretador do jQuery se perde. Dá uma olhada no seu Html se você tem um input com o name="TipoDoc" ou se esse campo enviado só em alguma condição, faça o seguinte, no seu php, substitua a linha acima por esta(adaptada):

$TipoDoc = isset($_POST['TipoDoc']) ? $_POST['TipoDoc'] : 'alguma valor para sua lógica de negócio' ;
4

Parece que os seus dados não estão no formato Json, consegue colocar o que aquele

console.log(data);

Está exibindo?

Mas pelo erro que aparece no seu console, ele não está no formato Json, precisa checar o tipo de dado que o PHP está esperando também.

Você está dizendo que o tipo de dado é JSON, mas pelo que log que printou ai não é, é um multidata.

type: 'POST',
url: 'ajax/pDocsNormativos.php',
data: data,
**dataType: 'json',**
cache: false,
contentType: false,
processData: false,

Você deve passar o tipo de data correto como parâmetro. Pode ser que apenas removendo o 'dataType: json' resolva, mas podem haver outros erros também.

4
  • Olá @rdeandrade, valeu pela ajuda, estou verificando, os dados enviados devem ser recebidos por post? Porque agora estou dando um echo em uma variável e ela está dando undefined. Commented 1/02/2017 às 13:56
  • Pode pode passar tanto por POST quando por GET ou qualquer outro verbo. O que importa é tanto o client quando o ser usarem o mesmo. w3schools.com/php/php_ajax_php.asp aqui tem uma explicação de mais ou menos como funciona. No exemplo está usando GET, mas pode ser POST também.
    – rdeandrade
    Commented 1/02/2017 às 14:04
  • @adventistapr lembrando que as variáveis são case sensitive.
    – Sorack
    Commented 3/02/2017 às 18:05
  • @adventistapr pode mostrar o console.log(data)? Commented 8/02/2017 às 16:33
3

Eu estive lendo sobre problemas parecidos e acredito que tua variável Data que seja o problema, visto que ela certamente não tem um JSON válido.

Confere esse Fiddle que é bem aplicável ao teu caso.

o que tu precisaria acrescentar no teu código seria:

(function ($) { // Função que vai tratar os dados do teu form para JSON
$.fn.serializeFormJSON = function () {

    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
  };
})(jQuery);

E uma pequena alteração no teu código:

submitHandler: function (form) {

e.preventDefault();
var data = $("#frmDoc").serializeFormJSON(); // pode chamar pelo ID do Form ou por THIS

console.log(data); // só pra mostrar o que tem dentro da variável agora

Espero ter ajudado.

3

Tente alterar isso:

submitHandler: function (form) {

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

Se você realmente precisa mandar pro servidor um JSON, aí não serve...Mas tente isso e veja o que chega no server.

Verifique a função que você está usando para validar o formulário - FormData().

Parece que nenhum valor está sendo enviado para o servidor (o item keys tem length: 0)

Como o seu $.ajax espera uma resposta no formato JSON, por causa do dataType: 'json', qualquer resposta do servidor que não esteja nesse formato vai gerar erro. Como nenhum valor está sendo passado para o servidor, provavelmente a resposta gerada não está no padrão JSON

Os dados RECEBIDOS precisam estar no formato JSON.

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server.

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 .