1

Galera preciso de um auxilio para fazer upload de imagem com AJAX,PHP e MySQL Ele pega todos os dados certinho, até grava o caminho da imagem no MySQL, porém não cria o arquivo na pasta destino, o que eu quero é mover a imagem setada na pasta destino, se eu faço os mesmo processo de PHP porém sem AJAX, ele faz o upload normal e move ela para o diretório. Enfim o que eu quero é conseguir fazer upload de image, já vi alguns exemplos na net e tentei adaptar no meu porém não funcionou, por favor help!!

FORMULÁRIO

<form id="form_funcionario" class="needs-validation" enctype="multipart/form-data" novalidate>
    <div class="form-group">
        <div class="row">
            <div class="col-sm" align="center">
                <img src="img/fotoPadrao.png" id="image_pre" class="card__profile" />
                <input type="file" id="upload" class="preview form-control" name="pic" accept="image/*" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-sm-6">
                <label for="validationCustom01" class="col-form-label">Nome:</label>
                <input type="text" id="validationCustom01" name="txtNome" class="form-control"  required /> 
                <div class="invalid-feedback">
                Campo obrigatório*
                </div>
            </div>
            <div class="col-sm-6"> 
                <label for="validationCustom02" class="col-form-label">Sobrenome:</label>
                <input type="text" id="validationCustom02" name="txtSobreNome" class="form-control" required />
                <div class="invalid-feedback">
                    Campo obrigatório*
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <label for="validationCustom03" class="col-form-label">RG:</label>
                <input type="text" id="validationCustom03" name="txtRg" class="form-control"  required /> 
                    <div class="invalid-feedback">
                    Campo obrigatório*
                    </div>
            </div>
            <div class="col-sm-6"> 
                <label for="validationCustom02" class="col-form-label">Tipo de Acesso:</label>
                <div class="input-group mb-3">

                    <select class="form-control" name="selectTipo" required>
                    <?php include 'processosPHP/montarOptionsA.php'; ?>
                    </select>

                    <div class="input-group-append">
                    <button type="button" class="btn btn-success">
                        <i class="fas fa-plus"></i>
                    </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <label for="validationCustom04" class="col-form-label">Login:</label>
                <input type="text" id="validationCustom04" name="txtLogin" class="form-control"  required /> 
                    <div class="invalid-feedback">
                    Campo obrigatório*
                    </div>
            </div>
            <div class="col-sm-6"> 
                <label for="validationCustom05" class="col-form-label">Senha:</label>
                <input type="password" id="validationCustom05" name="txtSenha" class="form-control" required />
                <div class="invalid-feedback">
                    Campo obrigatório*
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <label for="validationCustom06" class="col-form-label">Email:</label>
                <input type="email" id="validationCustom06" name="txtEmail" class="form-control"  required /> 
                    <div class="invalid-feedback">
                    Campo obrigatório*
                    </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
        <button type="submit" id="botaoCad" name="cadastrarFuncionario" class="btn btn-success">Cadastrar</button>
    </div>
</form>

AJAX

$('#form_funcionario').submit(function(e){
    e.preventDefault();
    var formulario = $(this);
    var retorno = inseriFormulario(formulario);

    function inseriFormulario(dados){
        $.ajax({
            type:"POST",
            data:dados.serialize(),
            url: "processosPHP/cadastrarFuncionario.php",
            async:false            
        }).then(sucesso,falha);

        function sucesso(data){
            $sucesso = $.parseJSON(data)["sucesso"];
            $("#mensagem").show();

            if($sucesso){
                $("#mensagem p").html($.parseJSON(data)['mensagem']);
            }else{
                $("#mensagem p").html($.parseJSON(data)['mensagem']);
            }
        }

        function falha(){
            console.log("erro");
        }
    }
});

PHP

if(isset($_POST['txtNome'])) {
    $nome        = utf8_decode($_POST['txtNome']);
    $sobreNome   = utf8_decode($_POST['txtSobreNome']);
    $rg          = utf8_decode($_POST['txtRg']);

    $email     = utf8_decode($_POST['txtEmail']);
    $login     = utf8_decode($_POST['txtLogin']);
    $senha     = utf8_decode($_POST['txtSenha']);
    $codTipoLogin     = utf8_decode($_POST['selectTipo']);

    $ext = strtolower(substr($_FILES['pic']['name'],-5)); //Pegando extensão do arquivo
    $new_name = date("Y.m.d-H.i.s") . $ext; //Definindo um novo nome para o arquivo
    $dir = './img/'; //Diretório para uploads 
    echo move_uploaded_file($_FILES['pic']['tmp_name'], $dir.$new_name);

    $inserir    = "INSERT INTO tbFuncionario ";
    $inserir    .= "(nome,sobreNome,rg,login,senha,foto,email,codTipoLogin) ";
    $inserir    .= "VALUES ";
    $inserir    .= "('$nome','$sobreNome','$rg', '$login','$senha','$new_name','$email','$codTipoLogin')";


    $retorno = array();
    $op_inser = mysqli_query($conecta,$inserir);

    if($op_inser){
        $retorno['sucesso'] = true;
        $retorno['mensagem'] = "Transportadora inserida com sucesso";
    }else{
        $retorno['sucesso'] = false;
        $retorno['mensagem'] = "Falha no sistema";
    }

    echo json_encode($retorno);
}
8
  • este manual vai resolver seu problema em parte pt.meta.stackoverflow.com/questions/5483/…
    – user60252
    Commented 17/12/2018 às 15:36
  • já formatei ele man Commented 17/12/2018 às 15:39
  • Pra que esses echos todos no código?
    – user60252
    Commented 17/12/2018 às 16:05
  • Eu esqueci de retirar eles, era só para eu ver se estava pegando os dados Commented 17/12/2018 às 16:12
  • Pode postar o formulário?
    – user60252
    Commented 17/12/2018 às 16:39

1 Resposta 1

2

você pode usar este modelo que desenvolvi:

PHP - cadastrarFuncionario.php

 <?php

    if(isset($_POST['txtNome'])) {

            #Conecta banco de dados 
            $myHost = "localhost"; // use seu nome de host
            $myUserName = "USUARIO";   // nome de usuário
            $myPassword = "SENHA";   // sua senha de login
            $myDataBaseName = "Nome_DB"; // nome do banco de dados

        $conecta = mysqli_connect( $myHost, $myUserName, $myPassword, $myDataBaseName ); 

            $nome        = utf8_decode($_POST['txtNome']);
            $sobreNome   = utf8_decode($_POST['txtSobreNome']);
            $rg          = utf8_decode($_POST['txtRg']);

            $email     = utf8_decode($_POST['txtEmail']);
            $login     = utf8_decode($_POST['txtLogin']);
            $senha     = utf8_decode($_POST['txtSenha']);
            $codTipoLogin     = utf8_decode($_POST['selectTipo']);


            $img = $_FILES['pic']['name'];
            $dir = './img/';
            //A função strrchr () localiza a posição da última ocorrência do ponto, e retorna todos os caracteres desta posição para o final.
            $ext = strtolower(strrchr($img, '.'));  //Pegando extensão do arquivo
            $new_name = date("Y.m.d-H.i.s") . $ext; //Definindo um novo nome para o arquivo       

            if (move_uploaded_file( $_FILES['pic']['tmp_name'],  $dir.$new_name )) {
                 echo "Upload efetuado com sucesso!"; 
            }  else {
                 echo "Não foi possível realizar o upload, tente novamente";
            }


            $inserir    = "INSERT INTO tbFuncionario ";
            $inserir    .= "(nome,sobreNome,rg,login,senha,foto,email,codTipoLogin) ";
            $inserir    .= "VALUES ";
            $inserir    .= "('$nome','$sobreNome','$rg', '$login','$senha','$new_name','$email','$codTipoLogin')";

            $op_inser = mysqli_query($conecta,$inserir);

    }

?>

Script e biblioteca

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">

    $(document).ready(function () {
        // evento de "submit"
        $("#botaoCad").click(function (e) {
            // parar o envio para que possamos faze-lo manualmente.
            e.preventDefault();
            // captura o formulário
            var form = $('#form_funcionario')[0];
            // cria um FormData {Object}
            var data = new FormData(form);
            // processar
            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: "processosPHP/cadastrarFuncionario.php",
                data: data,
                processData: false, // impedir que o jQuery tranforma a "data" em querystring
                contentType: false, // desabilitar o cabeçalho "Content-Type"
                cache: false, // desabilitar o "cache"
                // manipular o sucesso da requisição
                success: function (data) {
                    $("#documento_e").html(data);
                },
                // manipular erros da requisição
                error: function (e) {
                    $("#documento_e").html(e);
                }
            });
        });
    }); 

</script>

Após o formulário a div do sucesso ou erro da requisição

<div id="documento_e"></div>

Então Leo Caracciolo, eu utilizo uma parte do Bootstrap 4 que caso os campos não estejam preenchidos ele avermelha as bordas ....

Use esse script

    $(document).ready(function () {
        // evento de "submit"
        $("#botaoCad").click(function(event) {
                // Fetch form to apply custom Bootstrap validation
                var form = $("#form_funcionario");
                 event.preventDefault();
                if (form[0].checkValidity() === false) {
                  event.stopPropagation();
                }else{   
                    // cria um FormData {Object}
                    var data = new FormData(form[0]);
                    // processar
                    $.ajax({
                        type: "POST",
                        enctype: 'multipart/form-data',
                        url: "processosPHP/cadastrarFuncionario.php",
                        data: data,
                        processData: false, // impedir que o jQuery tranforma a "data" em querystring
                        contentType: false, // desabilitar o cabeçalho "Content-Type"
                        cache: false, // desabilitar o "cache"
                        // manipular o sucesso da requisição
                        success: function (data) {
                            $("#documento_e").html(data);
                        },
                        // manipular erros da requisição
                        error: function (e) {
                            $("#documento_e").html(e);
                        }
                    });


            }
            form.addClass('was-validated');

        });
    });

A única diferença deste cadastrarFuncionario.php para o anterior são as mensagens

<?php

    if(isset($_POST['txtNome'])) {

            #Conecta banco de dados 
            $myHost = "localhost"; // use seu nome de host
            $myUserName = "USUARIO";   // nome de usuário
            $myPassword = "SENHA";   // sua senha de login
            $myDataBaseName = "Nome_DB"; // nome do banco de dados

        $conecta = mysqli_connect( $myHost, $myUserName, $myPassword, $myDataBaseName );

            $nome        = utf8_decode($_POST['txtNome']);
            $sobreNome   = utf8_decode($_POST['txtSobreNome']);
            $rg          = utf8_decode($_POST['txtRg']);

            $email     = utf8_decode($_POST['txtEmail']);
            $login     = utf8_decode($_POST['txtLogin']);
            $senha     = utf8_decode($_POST['txtSenha']);
            $codTipoLogin     = utf8_decode($_POST['selectTipo']);


            $img = $_FILES['pic']['name'];
            $dir = './img/';
            //A função strrchr () localiza a posição da última ocorrência do ponto, e retorna todos os caracteres desta posição para o final.
            $ext = strtolower(strrchr($img, '.'));  //Pegando extensão do arquivo
            $new_name = date("Y.m.d-H.i.s") . $ext; //Definindo um novo nome para o arquivo       

            if (move_uploaded_file( $_FILES['pic']['tmp_name'],  $dir.$new_name )) {
                 $msg = "Upload efetuado com sucesso!"; 
            }  else {
                 $msg = "Não foi possível realizar o upload, tente novamente";
            }


            $inserir    = "INSERT INTO tbFuncionario ";
            $inserir    .= "(nome,sobreNome,rg,login,senha,foto,email,codTipoLogin) ";
            $inserir    .= "VALUES ";
            $inserir    .= "('$nome','$sobreNome','$rg', '$login','$senha','$new_name','$email','$codTipoLogin')";

            $op_inser = mysqli_query($conecta,$inserir);

            if($op_inser){
                $msg .= "<br>Transportadora inserida com sucesso";
            }else{
                $msg .= "<br>Falha no sistema";
            }

            echo $msg;

    }

?>
4
  • Cara muito obrigado funciono!!, mas o que seria querystring? Commented 18/12/2018 às 2:23
  • Então Leo Caracciolo, eu utilizo uma parte do Bootstrap 4 que caso os campos não estejam preenchidos ele avermelha as bordas, porém funciona somente quando ao um submit onde eu devo mudar nesse seu codigo para que ocorra "submit" por que voce $("#botaoCad").click não $("#botaoCad").submit., enfim ele não ta mais fazendo a ação de ficar vermelho quando nao preenchidas Commented 18/12/2018 às 3:32
  • @MauricioDantas, resposta editada com validação bootrap 4
    – user60252
    Commented 18/12/2018 às 16:09
  • querystring nada mais são do que conjuntos de pares/valores anexados a URL
    – user60252
    Commented 19/12/2018 às 6:35

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 .