Image upload with AJAX and PHP

Asked

Viewed 122 times

1

People need a help to upload images with AJAX, PHP and Mysql It takes all the data right, even writes the image path in Mysql, but 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’ve seen some examples on the net and tried to adapt in mine but it didn’t 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 jquery mysql ajax

  • this manual will solve your problem partly https://pt.meta.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas/5485#5485

  • I already formatted him man

  • So I can get all these in the code?

  • I forgot to take them out, just to see if I was getting the data

  • You can post the form?

  • can yes, just a moment

  • Note that I put ( enctype="Multipart/form-data" ) but still does not send via AJAX

  • take a tour https://answall.com/tour

Show 3 more comments

1 answer

2


you can use this model I developed:

PHP - register.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>
<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>

After the request success or error div form

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

So 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 are 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;

    }

?>

  • Thank you very much face function!! but what would querystring?

  • So Leo Caracciolo, I use a part of Bootstrap 4 that if the fields are not filled it reddens the edges, but works only when there is a Ubmit where I must change in that your code to occur "Ubmit" why Voce $("#botaoCad"). click not $("#footCad").submit., finally it is no longer making the action red when not filled

  • @Mauriciodantas, response edited with bootrap validation 4

  • querystring are nothing more than sets of pairs/values attached to URL

Browser other questions tagged php jquery mysql ajax

You are not signed in. Login or sign up in order to post.