Uploading image with AJAX and PHP

Question

Uploading image with AJAX and PHP

Navigation

#1 by (2 votes)

2

I need a help to upload image with AJAX, PHP and MySQL It takes all the data right, even saves the path of the image in MySQL, however does not create the file in the destination folder, what I want is to move the image set in the destination folder, if I do the same PHP process but without AJAX, it does the normal upload and moves it to the directory. Anyway what I want is to be able to upload image, I have already seen some examples on the net and tried to adapt it in my however it did not work, please help !!

FORM

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

php mysql jquery ajax

asked by anonymous 17.12.2018 / 16:33

1 answer

Is it possible to detect the scroll action only with CSS animation? Registering multiple images in a post

score 2 · Accepted Answer

You can use this template that I developed:

PHP - registerFunctional.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 and library

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptlanguage="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>

After the form the success div or request error

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

Then Leo Caracciolo, I use a part of Bootstrap 4 that if the fields are not filled it reddens the edges ....

Use this 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');

        });
    });

The only difference from this cadastrarFuncionario.php to the previous one is the messages

<?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;

    }

?>