UpLoad de Arquivo

Oi Joarllei, tudo bom?

O que acontece é que o type button não tem um comportamento padrão.

Para funcionar você tem que fazer um JS que capture o clique no botão e assim enviar o formulário.

Já o type submit envia os dados do formulário automaticamente.

Abraço!

Olá Joviane, Eu atribui uma função no onclick, veja o exemplo abaixo:

                                    <span class="btn btn-success fileinput-button">
                                          <input type="button" value="Enviar" onclick="salvarAnexo()";>
                                          <span>ANEXAR</span>
                                    </span>

    function salvarAnexo(){
        App.blockUI({ animate: true    });
        $.ajax({
            type: "POST",    
            data: $("#enviaArquivo").serialize(),        
            url: "Sistemas/NumeracaoDocumento/ajax/up_arquivo.php",        
            success: function(r) {
                alert(r);
                if (r != "semErro") {
                    App.unblockUI();
                    swal("Erro!", "Erro ao processar a solicitação.", "error");
                    $('.modal').modal('hide');
                } 
                else {
                    App.unblockUI();
                    swal("Sucesso!", "Arquivo anexado com sucesso.", "success");
                    $('.modal').modal('hide');
                }
            },
            error: function(objeto, mensagem) {
                App.unblockUI();
                swal("Atenção!", 'Erro no Carregamento', 'error');
                $('.modal').modal('hide');
            }
        });    
    }

Só para complementar, quando eu deixo do jeito que está "submit" além de da erro no processo de upload ele retorna para página inicial.

<form id="enviaArquivo" method="POST" enctype="multipart/form-data">
 <span class="btn btn-success fileinput-button">
<input type="submit" value="Enviar" onclick="salvarAnexo()";>
<span>ANEXAR</span>
 </span>
</form>

Você consegue me ajudar?

Na função salvarAnexo() eu coloquei $("#btn").onclick(function(), porém a página só fica em processamento.

<form id="enviaArquivo" method="POST" enctype="multipart/form-data">
      <span class="btn btn-success fileinput-button">
    <input id="btn" type="button" value="Enviar" onclick="salvarAnexo()";>
    <span>ANEXAR</span>
</span>
function salvarAnexo(){
        App.blockUI({ animate: true    });
        $("#btn").onclick(function(){
            $("#enviaArquivo").submit();
        })
        $.ajax({
            type: "POST",
            url: "Sistemas/NumeracaoDocumento/ajax/up_arquivo.php",
            data: $("#enviaArquivo").serialize(),        

            success: function(r) {
                alert(r);
                if (r != "semErro") {
                    App.unblockUI();
                    swal("Erro!", "Erro ao processar a solicitação.", "error");
                    $('.modal').modal('hide');
                } 
                else {
                    App.unblockUI();
                    swal("Sucesso!", "Arquivo anexado com sucesso.", "success");
                    $('.modal').modal('hide');
                }
            },
            error: function(objeto, mensagem) {
                App.unblockUI();
                swal("Atenção!", 'Erro no Carregamento', 'error');
                $('.modal').modal('hide');
            }
        });    
    }

Oi Joarllei!

Qual o erro que está dando com o submit?

Abraço!

Quando eu uso o submit ele não consegue fazer o upload, retorna na tela a mensagem de ERRO NO CARREGAMENTO, é um mensagem que coloquei via ajax. Na página php, conforme abaixo, se o upload for realizado com sucesso é para a $erro = "semErro"; ai eu faço um echo $erro; (isto será o retorno que eu preciso pegar para fazer a validação no AJAX abaixo.

//CÓDIGO AJAX
    function salvarAnexo(){
        App.blockUI({ animate: true    });
        $.ajax({
            type: "POST",
            url: "Sistemas/NumeracaoDocumento/ajax/up_arquivo.php",
            data: $("#enviaArquivo").serialize(),        

            success: function(r) {
                alert(r);
                if (r != "semErro") {
                    App.unblockUI();
                    swal("Erro!", "Erro ao processar a solicitação.", "error");
                    $('.modal').modal('hide');
                } 
                else {
                    App.unblockUI();
                    swal("Sucesso!", "Arquivo anexado com sucesso.", "success");
                    $('.modal').modal('hide');
                }
            },
            error: function(objeto, mensagem) {
                App.unblockUI();
                swal("Atenção!", 'Erro no Carregamento', 'error');
                $('.modal').modal('hide');
            }
        });    
    }


//CÓDIGO DA PÁGINA PHP.
<?php


//********************ANEXAR O ARQUIVO*************************//
    if(isset($_FILES['arquivo'])){

      //Pasta de Destino
      $_UP['pasta'] = "XXXXXXXXXX";

      // Tamanho máximo do arquivo (em Bytes)
      $_UP['tamanho'] = 1024 * 1024 * 5; // 5Mb

      // Array com as extensões permitidas
      $_UP['extensoes'] = array('zip', 'ZIP', '7Z','7z');
      // Array com os tipos de erros de upload do PHP
      $_UP['erros'][0] = 'Não houve erro';
      $_UP['erros'][1] = 'O arquivo no upload é maior do que o limite do PHP';
      $_UP['erros'][2] = 'O arquivo ultrapassa o limite de tamanho especifiado no HTML';
      $_UP['erros'][3] = 'O upload do arquivo foi feito parcialmente';
      $_UP['erros'][4] = 'Não foi feito o upload do arquivo';

      // Verifica se houve algum erro com o upload. Se sim, exibe a mensagem do erro
      $erro1 = $_FILES['arquivo']['error'];
      //echo $erro1;
      if ($_FILES['arquivo']['error'] != 0) {
        die("Não foi possível fazer o upload, erro:" . $_UP['erros'][$_FILES['arquivo']['error']]);
        exit; // Para a execução do script
      }
  /*
      // Faz a verificação da extensão do arquivo
      $extensao = strtolower(end(explode('.', $_FILES['arquivo']['name'])));
      if (array_search($extensao, $_UP['extensoes']) === false) {
        echo "Por favor, envie arquivos com as seguintes extensões: 'zip', 'ZIP', '7Z' ou '7z";
        exit;
      }
  */
      // Faz a verificação do tamanho do arquivo
      if ($_UP['tamanho'] < $_FILES['arquivo']['size']) {
        echo "<script>alert('O arquivo enviado é muito grande, envie arquivos de até 5Mb.');</script>";
        exit;
      }

      //upa o arquivo com o nome
      $erro = "semErro";
      //echo "<br/>";
      echo $erro;
      $name = $_FILES['arquivo']['name'];
      $data = date("Y.m.d-H.i.s");
      move_uploaded_file($_FILES['arquivo']['tmp_name'], $_UP['pasta'] .$data."-".$name);

          }
//********************FIM DO ANEXAR O ARQUIVO*************************//

?>

Oi Joarllei,

Você sabe qual erro específico que está ocorrendo? Consegue imprimir ao invés de colocar a mensagem genérica?

Abraço!

Joviane, Não dá nenhum código de erro, ele abaixo cai na condição abaixo e volta para página inicial.

//CÓDIGO AJAX
    function salvarAnexo(
.
.
.
            error: function(objeto, mensagem) {
                App.unblockUI();
                swal("Atenção!", 'Erro no Carregamento', 'error');
                $('.modal').modal('hide');

Eu não tô conseguindo entendo o motivo. Tem algo a ver com o "submit" e o "button". Quanto eu coloco o "submit" e coloco o endereço do .php no action o arquivo é salvo, porém eu não consigo direcionar a página correta. Quando eu coloco o type "button" ele da esse problema.

Oi Joarllei, tudo bom?

A melhor opção para enviar esses dados é com o type submit mesmo. Ele vai processar os campos do form naturalmente. Realizar essa funcionalidade com JS é muito mais complexo e menos intuitivo do que utilizar a funcionalidade padrão do HTML.

Os código que você trouxe aqui divergem um pouco um do outro. Aqui:

function salvarAnexo(){
        App.blockUI({ animate: true    });
        $("#btn").onclick(function(){
            $("#enviaArquivo").submit();
        })
        $.ajax({
            type: "POST",
            url: "Sistemas/NumeracaoDocumento/ajax/up_arquivo.php",
            data: $("#enviaArquivo").serialize(),        

            success: function(r) {
                alert(r);
                if (r != "semErro") {
                    App.unblockUI();
                    swal("Erro!", "Erro ao processar a solicitação.", "error");
                    $('.modal').modal('hide');
                } 
                else {
                    App.unblockUI();
                    swal("Sucesso!", "Arquivo anexado com sucesso.", "success");
                    $('.modal').modal('hide');
                }
            },
            error: function(objeto, mensagem) {
                App.unblockUI();
                swal("Atenção!", 'Erro no Carregamento', 'error');
                $('.modal').modal('hide');
            }
        });    
    }

A gente tem uma função que é chamada ao clickar no botão pelo atributo onClick no html. Dentro dele a gente chama um jquery indicando que ao clickar no botão o fomrulario é enviado com o submit do jquery. Que seria a mesma coisa que adicionar o submit no type do botão. Além disso rola um ajax que serializa o mesmo formulario e envia. Nesse caso provavelmente o ajax nem chega a ser executado porque o primeiro bloco ja vai te redirecionar para o script php.

Aqui:

function salvarAnexo(){
        App.blockUI({ animate: true    });
        $.ajax({
            type: "POST",
            url: "Sistemas/NumeracaoDocumento/ajax/up_arquivo.php",
            data: $("#enviaArquivo").serialize(),        

            success: function(r) {
                alert(r);
                if (r != "semErro") {
                    App.unblockUI();
                    swal("Erro!", "Erro ao processar a solicitação.", "error");
                    $('.modal').modal('hide');
                } 
                else {
                    App.unblockUI();
                    swal("Sucesso!", "Arquivo anexado com sucesso.", "success");
                    $('.modal').modal('hide');
                }
            },
            error: function(objeto, mensagem) {
                App.unblockUI();
                swal("Atenção!", 'Erro no Carregamento', 'error');
                $('.modal').modal('hide');
            }
        });    
    }

A gente tem somente a requisição ajax com POST para o script up_arquivo.php no diretorio Sistemas/NumeracaoDocumento/ajax/. Esse arquivo é referente ao código php que você compartilhou, certo?

Você ja chegou a adicionar um var_dump() no começo desse arquivo para garantir que ele está sendo chamado?

Vai verificando até que ponto o código está sendo executado (debugando) para descobrir onde o script está falhando.